时间戳

首页 > 解决方案 > 数据 ID Jquery 悬停图像叠加

javascript - 数据 ID Jquery 悬停图像叠加

问题描述

我希望你们都做得很好，我正在做这个个人项目，我卡在最后一点，所以基本上我有这些锚链接，它们可以把我带到另一个页面，但是为了给用户一个简短的预览，我想显示一个图像悬停在锚标签上

索引.html

  <div class="image-preview"  style="position: fixed; pointer-events: none;">
      <img src="images/icon/icon.png" class="imgprecont" style="float: right; width: 30%;">
  </div>
    <a href="#" data-img="images/1.png" class="prj">1</a>
    <a href="#" data-img="images/2.png" class="prj">2</a>
    <a href="#" data-img="images/3.png" class="prj">3</a>
    <a href="#" data-img="images/4.png" class="prj">4/a>
    <a href="#" data-img="images/5.png" class="prj">5</a>

APP.js

//PRJ Preview
let prj = $('.prj')
prj.each(function() {
    $(this).mouseover( function() {
        let imgcont = $('imgprecont')
        let prjimg = $('.prj').data('img')
        imgcont.src = prjimg;
        console.log(prjimg)
    })
})

所以这里当前的问题是应用程序无法更改图像的来源，当我将鼠标悬停在链接上时，控制台日志会显示第一个链接的 data-id 而不是其他链接，即 images/1.png

任何帮助表示感谢！

顺便说一下，该项目是在 JQuery 中构建的

标签： javascripthtmljquery

解决方案

I can see 2 issues with your code. You are using the wrong class selector. it should be $('.imgprecont') and not $('imgprecont'). And you need to use $(this) instead of $('.prj').

Please find the working example below. Please note, I have used random images for demonstration.

//PRJ Preview
let prj = $('.prj')
prj.each(function() {
    $(this).mouseover( function() {
        let imgcont = $('.imgprecont')
        let prjimg = $(this).data('img')
        $('.imgprecont').attr('src', prjimg);
    })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image-preview"  style="position: fixed; pointer-events: none;">
      <img src="https://i.picsum.photos/id/620/536/354.jpg?hmac=_2pm-B21Zzjfs_NH_75cY2sC0odhWQbKUMU9oCHoyh4" class="imgprecont" style="float: right; width: 30%;">
  </div>
    <a href="#" data-img="https://i.picsum.photos/id/620/536/354.jpg?hmac=_2pm-B21Zzjfs_NH_75cY2sC0odhWQbKUMU9oCHoyh4" class="prj">1</a>
    <a href="#" data-img="https://i.picsum.photos/id/237/536/354.jpg?hmac=i0yVXW1ORpyCZpQ-CknuyV-jbtU7_x9EBQVhvT5aRr0" class="prj">2</a>
    <a href="#" data-img="https://i.picsum.photos/id/1084/536/354.jpg?grayscale&hmac=Ux7nzg19e1q35mlUVZjhCLxqkR30cC-CarVg-nlIf60" class="prj">3</a>
    <a href="#" data-img="https://i.picsum.photos/id/1060/536/354.jpg?blur=2&hmac=0zJLs1ar00sBbW5Ahd_4zA6pgZqCVavwuHToO6VtcYY" class="prj">4/a>
    <a href="#" data-img="https://i.picsum.photos/id/620/536/354.jpg?hmac=_2pm-B21Zzjfs_NH_75cY2sC0odhWQbKUMU9oCHoyh4" class="prj">5</a>

推荐阅读