jquery - 带有数字的 jQuery 选择类。例如 foo1, foo2, foo3, foo4

Question

我正在尝试选择一个 div 列表（foo#）并在悬停时淡入另一个 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>

Answer 1

您可以使用“以”选择器开头的属性：

$("div[class^='foo']").hover(function() {
    $(this).find("div[class^='zxcv']").fadeIn();
}, function() {
    $(this).find("div[class^='zxcv']").fadeOut();
});

这消除了循环的需要，因为大多数 jQuery 方法适用于集合中的每个元素。

Answer 2

您正在关闭回调中的循环变量i，其最终结果i始终6在其中（您可以使用console.logor进行检查alert）。

要解决这个问题，您需要确保每个回调都有自己的i. 由于 Javascript 变量的作用域不是块而是整个函数，这意味着您需要使用i每次的当前值调用函数：

for (var i = 1; i < 6; i++) {
    (function(i) {
        $(".foo"+i).hover(
                function ()
                {
                    $(".zxcv"+i).fadeIn();
                }, function ()
                {
                    $(".zxcv"+i).fadeOut();
                });
    })(i);
}

几点注意事项：

• 循环条件i < 6不是i <= 6-- 这是一个错误吗？
• 正如其他人已经说过的，在这种特定情况下，您可以通过使用不同的选择器完全避免关闭问题。

Answer 3

您可以选择所有$("[class^='foo']")（另见此处）：

$("[class^='foo']").hover(
    function () {
        $(this).find("[class^='zxcv']").fadeIn();
    }, function () {
        $(this).find("[class^='zxcv']").fadeOut();
    }
);

另请参阅我的示例。

Answer 4

尝试使用 :nth-child()

for (var i = 1; i < 6; i++) {
    $(".foo:nth-child("+i+")").hover(
            function ()
            {
                $(this).fadeIn();
            }, function ()
            {
                $(this).fadeOut();
            });
    }