Javascript 在for循环中增加[i]不起作用

这似乎是一个简单的问题，我希望你能帮助我。 我想补充一点，我的代码按照我描述它的方式工作。我不满足于我解决问题的方式，即在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 color元素的值是否与webiste上图像的标题匹配。 对于每个小于var color长度的元素，我在一个列表中创建两个链接，并用div包装，然后在a href包装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;

}

---

for（var i=0；i您正面临一个
ECMA-/Javascript
程序员可能犯的最大错误之一：

忘记
闭包
和
提升变量

将其放入
for循环中
：

$(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));
}

for（var i=0；i它是递增的
i
很好，但是悬停函数中的
i
是对循环中
i
的引用。循环完成后，悬停函数中的
i
在所有悬停函数中是循环后的
i
的值。这称为闭包

如果要在创建函数的特定时间点冻结
i
的值，需要执行以下操作：

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

您可以快速执行以下操作：

$.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）{
$（“
”）之后插入（“a[href$=”+水果[i]+“]”）；
$（“img[title$='”+fruit[i]+“']：first”）。悬停（函数（）{
$（“#颜色菜单”+i）.toggle（）；
});
});

这里的区别是，
i
的作用域是这个回调，而不是引用每次都随循环变化的同一个变量。
除了我得到的最大的“谢谢”之外，我还能说什么呢。我不是一个程序员，只是试着理解语法，试着每天多学一点。谢谢你指出我的错误还有一切。太棒了。我要花上几天才能弄明白。谢谢。嘿，祝贺你达到10万！
$(hoverstring[i]).hover((function (x) {
    return function () {
        $(idstring[x]).toggle();
    }
})(i));

$.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();
  });
});