jQuery“for”循环(jQuery “for” loop)

 我想在这里写一些非常基本的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个孩子，而不是具体的数字，现在将成立i。 当我改变时，第n个孩子（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);
 
 尽管这个缩短的代码不起作用。 
 
 有人可以帮我弄这个吗？ 非常感谢。 

I am trying to write some very basic jQuery code here.
 
What I am doing here is I want the image to toggle when hover. I have 5 images, and I was able to archive that when I wrote 5 codes, 1 for each image.
 
        $('#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();
        });
 
Now I want to shorten the code, using the "for" loop. The idea is I have a variable i, starting from 1, increasing 1 by 1 up to 5. The nth-child above, instead of having a specific number, will now hold i. As i changes, nth-child(i) will have respective values of 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);
 
This shorten code doesn't work though.
 
Can someone help me with this? Thanks a lot.

原文：https://stackoverflow.com/questions/23902052