我试图在悬停时选择一个div列表(foo#)和fadeIn另一个div(zxcv#)。我在javascript中分配了var,但最终效果只显示在foo6中?
<div class="foo1"><div class="zxcv1"></div></div>
<div class="foo2"><div class="zxcv2"></div></div>
<div class="foo3"><div class="zxcv3"></div></div>
<div class="foo4"><div class="zxcv4"></div></div>
<div class="foo5"><div class="zxcv5"></div></div>
<div class="foo6"><div class="zxcv6"></div></div>
<script type="text/javascript">
for (var i = 1; i < 6; i++) {
$(".foo"+i).hover(
function ()
{
$(".zxcv"+i).fadeIn();
}, function ()
{
$(".zxcv"+i).fadeOut();
});
}
</script>
答案 0 :(得分:3)
您可以使用“attribute starts with”选择器:
$("div[class^='foo']").hover(function() {
$(this).find("div[class^='zxcv']").fadeIn();
}, function() {
$(this).find("div[class^='zxcv']").fadeOut();
});
这消除了对循环的需要,因为大多数jQuery方法都适用于集合中的每个元素。
答案 1 :(得分:2)
您正在关闭回调中的循环变量i
,其最终结果是i
始终在6
内(您可以使用{{1}进行检查}或console.log
)。
要解决此问题,您需要确保每个回调都有自己的alert
值。由于Javascript变量的范围不是块,而是整个函数,这意味着每次都需要调用当前值为i
的函数:
i
几点说明:
for (var i = 1; i < 6; i++) {
(function(i) {
$(".foo"+i).hover(
function ()
{
$(".zxcv"+i).fadeIn();
}, function ()
{
$(".zxcv"+i).fadeOut();
});
})(i);
}
而不是i < 6
- 这是一个错误吗?答案 2 :(得分:1)
您可以使用$("[class^='foo']")
选择所有内容(另请参阅here):
$("[class^='foo']").hover(
function () {
$(this).find("[class^='zxcv']").fadeIn();
}, function () {
$(this).find("[class^='zxcv']").fadeOut();
}
);
另见my example。
答案 3 :(得分:0)
尝试使用:nth-child()
for (var i = 1; i < 6; i++) {
$(".foo:nth-child("+i+")").hover(
function ()
{
$(this).fadeIn();
}, function ()
{
$(this).fadeOut();
});
}