傳遞變量設置爲：EQ jQuery選擇在while循環

Question

我想分配的jQuery hover功能的所有元素中<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); 
}); 

可能是什麼問題呢？感謝您的回答。

Answer 1

這是因爲調用回調時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++; 
}; 

這樣可以保護你的元素在一個封閉的價值。