1

次のコードを使用して、リストhover内のすべての要素にjquery関数を割り当てようとしています:<ul>

var element = 0;
var length = $(".artist-list-link").length;
while (element<length) {
    $(".artist-list-link:eq("+element+")").hover(function() {
        $(".artist-back:eq("+element+")").css('display','block');
        $(".artist-hover:eq("+element+")").fadeIn(100);
    }, function() {
        $(".artist-back:eq("+element+")").css('display','none');
        $(".artist-hover:eq("+element+")").fadeOut(100);
    });
element++;
};

マークアップは次のようになります。

<ul>
    <li><a class="artist-list-link" href="">Artist 1</a></li>
    <li><a class="artist-list-link" href="">Artist 2</a></li>
    <li><a class="artist-list-link" href="">Artist 3</a></li>
    <li><a class="artist-list-link" href="">Artist 4</a></li>
    <li><a class="artist-list-link" href="">Artist 5</a></li>
</ul>

また、アーティストごとにいくつかの div があります (読みやすくするために、すべてのリンクを削除しました。

<div class="artist-thumbnail artist-size">
    <div class="artist-card artist-size artist-hover"></div>
    <div class="artist-card artist-size"><img src="" /></div>
    <div class="artist-card artist-size artist-back">Artist 1</div> 
</div>

しかし、上記のループは実際には機能しませんが、以下のコードは完全に機能します:

$('.artist-list-link:eq(0)').hover(function() {
    $('.artist-back:eq(0)').css('display','block');
    $('.artist-hover:eq(0)').fadeIn(100);
}, function() {
    $('.artist-back:eq(0)').css('display','none');
    $('.artist-hover:eq(0)').fadeOut(100);
});

何が問題なのですか？回答ありがとうございます。

4

1 に答える 1

5

これelementは、コールバックが呼び出されたときに変更されたためです。

あなたはこれを行うことができます ：

while (element<length) {
    (function(element) {
      $(".artist-list-link:eq("+element+")").hover(function() {
        $(".artist-back:eq("+element+")").css('display','block');
        $(".artist-hover:eq("+element+")").fadeIn(100);
      }, function() {
        $(".artist-back:eq("+element+")").css('display','none');
        $(".artist-hover:eq("+element+")").fadeOut(100);
      });
    })(element);
    element++;
};

これにより、クロージャー内の要素の値が保護されます。

于 2012-12-20T15:58:17.443 に答える