Увеличение [i] в ​​цикле for не работает

Question

это простой вопрос, и я надеюсь, что вы мне поможете.Я хотел бы добавить, что мой код работает так, как я его описываю.Я не доволен тем, как я решил мою проблему, касающуюся моей проблемы увеличения [i] за пределами цикла for.

Мне нужно, чтобы боковое меню отображалось при наведении курсора на изображение.

Мой 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, и вставляю его после 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;

}

Последний шагвот где у меня возникли проблемы с созданием функции для каждого элемента.Это просто пример того, как это выглядит:

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

Этот метод работает, но я бы сказал, что он не очень удобен.Вместо того, чтобы создавать большое количество функций, я хотел бы увеличить 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

Это просто увеличение i, но i внутри функции наведения - это ссылка на i в цикле. После завершения цикла значение i внутри функции наведения, внутри всех функций наведения - это значение i после цикла. Это называется закрытием.

Если вы хотите заморозить значение i в определенный момент времени, когда вы создаете функцию, вам нужно сделать это:

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

Answer 3

Вы столкнулись с одной из самых больших ошибок, которые может сделать 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));
}