Question

这似乎是一个简单的问题，我希望你能帮助我。我想补充一点，我的代码就像我描述的那样工作。我不满足于我在for-loop之外增加[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颜色元素的值是否与webiste上的图像标题相匹配。对于每个小于var颜色长度的元素，我在列表中创建两个由div包装的链接，并在href包装img-element之后插入它。

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的引用。循环完成后，hover函数内的i在所有悬停函数内，是循环后i的值。这被称为闭包。

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

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

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

3 个答案: