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

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 color 元素的值是否与网站上的图像标题匹配。 对于每个小于 var color 长度的元素，我在一个列表中创建两个链接，由 div 包裹，并将其插入到包裹 img 元素的 href 之后。

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));