Incrémenter [i] dans la boucle for ne fonctionne pas

Question

cela semble être une question simple et j'espère que vous pouvez m'aider. Je voudrais ajouter que mon code fonctionne comme je le décris. Je ne suis pas satisfait de la façon dont j'ai résolu mon problème concernant mon problème en incrémentant [i] en dehors de la boucle for.

Ce que je veux, c'est afficher un menu de barre latérale lorsque l'on survole une image.

Mon CSS ressemble:

GM_addStyle 
(
'.colormenu {  \ 
display:none;  \ 
margin-left: 10px;  \ 
margin-top: -55px;  \ 
}    \ 
.colormenu a {   \ 
display: block;    \ 
width: 30px;     \ 
}       \ 
.colorlist {     \ 
list-style-type: none;   \ 
}       \ 
' 
); 

Maintenant, je suis définir deux variables. L'un contenant des couleurs, l'autre contenant des fruits.

var color = ['red','yellow','green','blue']; 
var fruit = ['strawberry','banana','apple','blueberry']; 

Je puis deux tableaux définis:

var hoverstring = new Array(color.length); 
var idstring = new Array(color.length);

Maintenant, je veux voir si la valeur d'un élément de couleur var correspond à un titre des images sur le webiste. Pour chaque élément étant plus petit que la longueur de la couleur var, je crée deux liens dans une liste enveloppée par un div et l'insère après un href enveloppant l'img-élément. La dernière étape que je prends et c'est où j'ai eu des problèmes avec est de créer une fonction pour chaque élément. Ceci est juste un exemple de ce qu'il ressemble:

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

Cette méthode fonctionne, mais n'est pas très pratique je dirais. Au lieu de créer une grande quantité de fonctions, je voudrais incrémenter et ne pas le faire manuellement.

Comme:

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

Je l'ai essayé à plusieurs reprises, mais pour une raison quelconque, je n'est pas incrémentée dans la boucle for. Avez-vous une idée pourquoi? Je souhaite vraiment que vous puissiez m'aider. Merci d'avance.

Answer 1

Vous pouvez faire quelque chose de rapide comme ceci:

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

La différence ici est que i est limitée à ce rappel, ne référençant pas la même variable qui change avec la boucle à chaque fois.

Answer 2

Vous êtes confronté à l'une des plus grandes erreurs programmeur ECMA-/ Javascript peut faire:

Oublier closures et hoisting of variables.

Mettre dans votre for-loop:

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

causerait que i serait Closured par toutes vos méthodes. Vous devez appeler une autre fonction pour résoudre cette question:

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

Il incrémente i très bien, mais la fonction i l'intérieur de votre vol stationnaire est une référence à la i dans la boucle. Une fois la boucle terminée, le i à l'intérieur de la fonction hover, à l'intérieur toutes les fonctions hover, est la valeur de i après la boucle. C'est ce qu'on appelle une fermeture.

Si vous voulez geler la valeur de i au moment précis dans le temps vous créez la fonction, vous devez faire ceci:

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