在for循環中遞增[i]不起作用

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包裝的鏈接，並在包裝​​img-element的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));