在while循环中将变量传递给:eq jquery选择器
Passing variable to :eq jquery selector in a while loop
我试图将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);
});
有什么问题吗?谢谢你的回答。
这是因为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++;
};
在闭包中保护元素的值
相关文章:
- jQuery eq()导致无限迭代
- Opposite of jQuery's :eq()
- JQuery parents().eq(2) 和 .parent().parent() 不行为
- 香草 js 替换 jQuery 的 index() 和 eq()
- jQuery 选择器 eq:() 不起作用
- Pure JS equivalent of Jquery eq()
- Jquery的eq(0),“.first-child”,first()如果它是一个iframe,则不会抓住第一个孩子
- 原型等效于 jQuery eq 方法
- 增量eq(i)setTimeout函数jquery
- Jquery eq(索引越界)和子级
- array.eq()与Javascript和Jquery中的array[]
- 带有变量的Jquery eq选择器不起作用
- 在eq()函数jquery中添加多个索引
- jQuery嵌套:eq选择器
- 如何编写一个jQuery选择器,在单个表达式中使用多个:eq's
- 为什么jQuery $("td:eq(0)")比$("td").eq(0)慢?
- Convert jQuery's eq() to Greensock?
- Understanding jQuery's .eq()
- jquery 's的反义词:eq() - jquery
- 在while循环中将变量传递给:eq jquery选择器