jquery - 悬停的当前项目，虽然相同的类和 id

Question

我有这个 HTML 结构，部分用于 foreach 循环。

<div class="zlist">
<div class="vimg">
[{foreach from=gallery item=bla}]
<img class="minimg" src="img1" data-pic="img2">
[{/foreach}]
</div>
<div>
<img class="primg" src="standard.img">
</div>
</div>

这个JS代码：

function findImg (){
$('.minimg').each(function(e){
    var newsrc = $(this).data('pic');
    var src = $('.primg').attr('src');
    $(this).hover(function(){
      $('.primg').attr('src', newsrc);
    }, function(){
      $('.primg').attr('src', src);
    });
  });
  console.log(newsrc)
 }

findImg();

当鼠标悬停在<img class="minimg">大图上时，更改 src 中的属性<img class="primg">。这工作得很好。

问题是，所有元素中都有，请参阅 foreach 循环更改的图像。我只希望更改悬停时的当前元素。

你能帮助我吗？

Answer 1

根据您的链接，您需要定位正确的图像而不是使用$('.primg')，这将选择页面上的所有目标。

$('.minimg').each(function(e){
    var newsrc = $(this).data('pic'),
        $target = $(this).parent().next().children(), // traverse to find target
        src = $target.attr('src');
    $(this).hover(function(){
      $target.attr('src', newsrc);
    }, function(){
      $target.attr('src', src);
    });
  });
  console.log(newsrc)
 }