0

この 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 ループで変更された画像を参照してください。ホバー時の現在の要素のみを変更したい。

手伝って頂けますか？

4

1 に答える 1

0

リンクに基づいて$('.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)
 }
于 2013-07-13T13:35:15.410 に答える