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">上的鼠标悬停是大局时，请更改<img class="primg">中的src属性。这很有效。

问题是，在所有元素中都有参见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)
 }

当前项目在悬停时，虽然是同一类和id

1 个答案: