递增[i] for循环不起作用

Question

这似乎是一个简单的问题，我希望你能帮助我。 我想补充一点，我的代码按我描述它的方式工作。我并不满足于解决我在for循环外增加[i]问题的方式。

我想要的是获得一个边栏菜单显示当一个图片悬停。

我的CSS是这样的：

GM_addStyle 
(
'.colormenu {  \ 
display:none;  \ 
margin-left: 10px;  \ 
margin-top: -55px;  \ 
}    \ 
.colormenu a {   \ 
display: block;    \ 
width: 30px;     \ 
}       \ 
.colorlist {     \ 
list-style-type: none;   \ 
}       \ 
' 
); 

现在我定义两个变量。一个包含一些颜色，另一个包含一些水果。

var color = ['red','yellow','green','blue']; 
var fruit = ['strawberry','banana','apple','blueberry']; 

我再定义两个数组：

var hoverstring = new Array(color.length); 
var idstring = new Array(color.length);

现在我想看看VAR色彩元素的值是否在网站的图片的标题匹配。 对于每个小于var颜色长度的元素，我在列表中创建两个包含div的链接，并在包装​​img元素之后插入它。

for (var i=0;i<color.length;i++) { 
$("<div id='colormenu"+i+"' class='colormenu'><ul class='colorlist'><li><a href='path"+color[i]+"'>Call</a></li><li><a href='path"+color[i]+"'>Chat</a></li></ul><div>").insertAfter("a[href$='"+fruit[i]+"']"); 


hoverstring[i]="img[title$='"+fruit[i]+"']:first"; 
idstring[i]="#colormenu"+i; 

}

我采取的最后一步，这是我遇到问题的地方是为每个元素创建一个函数。这只是它的一个例子：

$(hoverstring[0]).hover(function(){ 
     $(idstring[0]).toggle(); 
    });
 
    $(hoverstring[1]).hover(function(){ 
     $(idstring[1]).toggle(); 
    });
 
    $(hoverstring[2]).hover(function(){ 
     $(idstring[2]).toggle(); 
    });
 
    $(hoverstring[3]).hover(function(){ 
     $(idstring[3]).toggle(); 
    });
 
    $(hoverstring[4]).hover(function(){ 
     $(idstring[4]).toggle(); 
    });
 
    $(hoverstring[5]).hover(function(){ 
     $(idstring[5]).toggle(); 
    });
 

这种方法的作品，但不是很方便我会说。而不是创建大量的函数，我想增加i而不是手动执行。

像：

for (var i=0;i<color.length;i++) { 
$("<div id='colormenu"+i+"' class='colormenu'><ul class='colorlist'><li><a href='path"+color[i]+"'>Call</a></li><li><a href='path"+color[i]+"'>Chat</a></li></ul><div>").insertAfter("a[href$='"+fruit[i]+"']"); 




hoverstring[i]="img[title$='"+fruit[i]+"']:first"; 
idstring[i]="#colormenu"+i; 


$(hoverstring[i]).hover(function(){ 
     $(idstring[i]).toggle(); 
    }); 
}

我试了好几次，但由于某种原因，我没有在for循环递增。你知道为什么吗？

我真的希望你能帮助我。先谢谢你。

Answer 1

你可以做一些快速的是这样的：

$.each(color, function(i) { 
    $("<div id='colormenu"+i+"' class='colormenu'><ul class='colorlist'><li><a href='path"+this+"'>Call</a></li><li><a href='path"+this+"'>Chat</a></li></ul><div>").insertAfter("a[href$='"+fruit[i]+"']"); 
    $("img[title$='"+fruit[i]+"']:first").hover(function(){ 
    $("#colormenu"+i).toggle(); 
    }); 
}); 

这里的区别在于i的作用域是这个回调函数，而不是引用每次都随着循环而改变的相同变量。

Answer 2

你面临的最大失误ECMA-/ Javascript程序员可以创建一个：

忘掉closures和hoisting of variables。

在for-loop把这样的：

$(hoverstring[i]).hover(function(){ 
    $(idstring[i]).toggle(); 
}); 

会导致该i将通过所有的方法闭包。你需要调用另一个函数来解决这个问题：

for (var i=0;i<color.length;i++) { 
    $("<div id='colormenu"+i+"' class='colormenu'><ul class='colorlist'><li><a  href='path"+color[i]+"'>Call</a></li><li><a  href='path"+color[i]+"'>Chat</a></li></ul><div>").insertAfter("a[href$='"+fruit[i]+"']"); 


    hoverstring[i]="img[title$='"+fruit[i]+"']:first"; 
    idstring[i]="#colormenu"+i; 

    (function(index){ 
     $(hoverstring[index]).hover(function(){ 
      $(idstring[index]).toggle(); 
     }); 
    }(i)); 
} 

Answer 3

据递增i就好了，但你的i悬停内部函数是一个参考到i在循环。循环完成后，i里面的悬停功能，里面的全部为悬停功能，循环后的值为i。这被称为封闭。

如果你想在你创建函数特定时刻冻结的i值，你需要这样做：

$(hoverstring[i]).hover((function (x) { 
    return function() { 
     $(idstring[x]).toggle(); 
    } 
})(i));