javascript jQuery“for”循环
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23902052/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery "for" loop
提问by thu nguyen
I am trying to write some very basic jQuery code here.
我正在尝试在这里编写一些非常基本的 jQuery 代码。
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.
我在这里做的是我希望图像在悬停时切换。我有 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();
});
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.
现在我想使用“for”循环来缩短代码。这个想法是我有一个变量 i，从 1 开始，增加 1 到 5。上面的第 n 个孩子，而不是有一个特定的数字，现在将持有 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);
This shorten code doesn't work though.
但是这个缩短的代码不起作用。
Can someone help me with this? Thanks a lot.
有人可以帮我弄这个吗？非常感谢。
回答by Arun P Johny
If you want to target the elements within the currently hovered element, then you can use .find()/.children()in context with this(in the event handler thisrefers to the element which was targeted by the handler - in this case the lielement) like
如果你想针对目前徘徊元素中的元素，那么你可以使用.find（）/ 。孩子（）在上下文中使用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();
});
});
Another option since you didn't share the target markup is to find the index of the current liusing .index()and use it to target the liin the same index like
由于您没有共享目标标记，另一种选择是li使用.index()找到当前的索引，并使用它来定位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();
});
});
回答by konghou
This seems can be completely replaced by changing the css hover - background style instead of using javascript to toggle hover image.
这似乎可以通过更改 css 悬停 - 背景样式而不是使用 javascript 切换悬停图像来完全替代。
回答by Piyush Kumar Baliyan
Modify your selctor:
修改您的选择器：
$('#menu > ul:first-child > li:nth-child(i)') to
$('#menu > ul:first-child > li:nth-child('+i+'))'
$('#menu > ul:first-child > li:nth-child( i)') 到
$('#menu > ul:first-child > li:nth-child( '+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);
The problem is that your code is taking your i AS i (alphabet) not i AS i(variable) because your i is in quotes remove quotesfrom around i.
问题是你的代码把你的 i AS i（字母）而不是 i AS i（变量），因为你的 i 在引号中删除了 i 周围的引号。
