传递变量设置为：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++; 
}; 

这样可以保护你的元素在一个封闭的价值。