javascript - jQuery "for"循环

Question

我正在尝试在这里编写一些非常基本的 jQuery 代码。

我在这里做的是我希望图像在悬停时切换。我有 5 张图片，当我编写 5 个代码(每张图片 1 个)时，我能够将其存档。

        $('#menu > ul:first-child > li:nth-child(1)').hover(function(){
            $('li:nth-child(1) > .image-hover').toggle();
            $('li:nth-child(1) > .image').toggle();
        });

        $('#menu > ul:first-child > li:nth-child(2)').hover(function(){
            $('li:nth-child(2) > .image-hover').toggle();
            $('li:nth-child(2) > .image').toggle();
        });

        $('#menu > ul:first-child > li:nth-child(3)').hover(function(){
            $('li:nth-child(3) > .image-hover').toggle();
            $('li:nth-child(3) > .image').toggle();
        });

        $('#menu > ul:first-child > li:nth-child(4)').hover(function(){
            $('li:nth-child(4) > .image-hover').toggle();
            $('li:nth-child(4) > .image').toggle();
        });

        $('#menu > ul:first-child > li:nth-child(5)').hover(function(){
            $('li:nth-child(5) > .image-hover').toggle();
            $('li:nth-child(5) > .image').toggle();
        });

现在我想使用“for”循环来缩短代码。我的想法是我有一个变量 i，从 1 开始，1 递增 1，直到 5。上面的第 n 个 child ，而不是有一个特定的数字，现在将持有 i。随着 i 的变化，第 nth-child(i) 将具有相应的 i 值。

        (function($){
            for (var i = 1; i < 6; i++) {
                $('#menu > ul:first-child > li:nth-child(i)').hover(function(){
                    $('li:nth-child(i) > .image-hover').toggle();
                    $('li:nth-child(i) > .image').toggle();
                });
            };
        })(jQuery);

虽然这个缩短代码不起作用。

有人可以帮我解决这个问题吗？非常感谢。

Answer 1

如果你想定位当前悬停元素中的元素，那么你可以使用 .find()/.children()在 this 的上下文中(在事件处理程序中 this 指的是处理程序所针对的元素 - 在本例中是 li 元素)，例如

//dom ready handler
jQuery(function ($) {
    $('#menu > ul:first-child > li').hover(function () {
        //I think you want to target the child elements of the current li so
        $(this).children('.image-hover').toggle();
        $(this).children('.image').toggle();
    });
});

由于您没有共享目标标记，另一个选项是使用 .index() 查找当前 li 的索引。并使用它来定位相同索引中的 li

//dom ready handler
jQuery(function ($) {
    $('#menu > ul:first-child > li').hover(function () {
        //find the index of the current element
        var i = $(this).index();
        //use i as a variable to find i'th child of li
        $('li:nth-child(' + i + ') > .image-hover').toggle();
        $('li:nth-child(' + i + ') > .image').toggle();
    });
});