Discussion :

[pito2901]

Bonjour,

Tout d'abord voici le code :

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
$int = [];
//je récupère la valeur des id des input contenus dans la div #div
for($i = 1; $i <= $('#div').children().length; $i++){
    $int.push($('#int div:nth-child('+$i+') input').attr('id'));
}
alert($int);//retourne : element1,element2,element3

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
//je crée un événement à chaque élément de int[]
for($j = 0; $j < $int.length; $j++){
    alert($j); //retourne bien 0 puis 1 puis 2
    $('#'+$int[$j]).click(function(){
        alert('j=' + $j + ' id=' + $int[$j]); //mais ici j'obtiens : "j=3 id=undefined"
    });
}

Pourquoi $j prend la valeur de sortie de la boucle à l'intérieur de ma boucle for ? A cause d'un déclaration de fonction .click() ? Si oui, comment y remédier ? Merci.

[danielhagnoul]

Votre code n'est pas en JavaScript

On sens l'influence néfaste du PHP

Dans le JS d'aujourd'hui, une variable se déclare avec let et une constante avec const.

[pito2901]

Je crois que vous faites erreur, il s'agit bien de js et les erreurs retournés dans la console sont bien du js, si c'est la marque du $ qui dérange, il s'agit simplement de jQuery...

[NoSmoking]

Bonjour,

si c'est la marque du $ qui dérange, il s'agit simplement de jQuery...

Concernant le soucis celui ci a été traité un nombre incalculable de fois sur le forum, avec un minimum de recherche je pense que tu aurais pu trouver.

Quoiqu'il en soit, prend l'habitude de regarder dans la
Comment attribuer à des objets un onclick faisant appel à une variable de boucle ?

[danielhagnoul]

Je crois que vous faites erreur, il s'agit bien de js et les erreurs retournés dans la console sont bien du js, si c'est la marque du $ qui dérange, il s'agit simplement de jQuery...

Je sais reconnaître du code jQuery, je l'ai pratiqué pendant plusieurs années.

Vos variables $int, $i et $j me feront toujours penser au PHP.

Si vous déclariez vos variables comme il se doit : let int = [], i, j;, cela lèverait l'ambiguïté et résoudrait votre problème !

Écrire des variables JS en commençant systématiquement par un signe $, est une très mauvaise habitude et une source de confusion pour la maintenance du code.

[pito2901]

Bonjour, j'ai donc testé votre méthode mais sans succès :

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
let interactions = [], i, j;
//je récupère les id des interactions dans le tableau interactions
for(i = 1; i <= $('#interactions').children().length; i++){
    interactions.push($('#interactions div:nth-child('+i+') input').attr('id'));
}
//je crée les évenements de cette liste d'interactions
for(j = 0; j < interactions.length; j++){
    alert('j=' + j + ' id=' + interactions[j]);
    $('#'+interactions[j]).click(function(){
        alert('j=' + j + ' id=' + interactions[j]);
    });
}

[danielhagnoul]

for(i = 1; i <= $('#interactions').children().length; i++){... ?

<= au lieu de <, donc un élément vide en plus dans int[].

[Loralina]

Bonjour,

Pourquoi $j prend la valeur de sortie de la boucle à l'intérieur de ma boucle for ?

Quand la fonction de clic est executée, il est fait référence à la variable j externe à la fonction.
j vaut 3, c'est sa valeur actuelle au moment où est exécutée la fonction.
Donc j vaut la valeur au moment de l'appel de la fonction et non sa valeur au moment de la création de la fonction.

Un exemple similaire sans boucle :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
i=0;
function a() {alert(i);}
i=3;
a();

Il sera affiché 3, c'est à dire la valeur de i au moment de l'appel de la fonction et non celle de i au moment de la création de la fonction.


Ensuite, avec let, vous pouvez effectivement régler le problème en déclarant la variable dans le for :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

for(let j = 0; j < interactions.length; j++){

A noter que cette solution ne fonctionnera pas sur Internet Explorer.
On l'avait constaté notamment dans ce sujet :
https://www.developpez.net/forums/d1...rnet-explorer/

Au niveau des autres solutions :

Toujours dans le même sujet, une méthode proposée par Watilin :
https://www.developpez.net/forums/d1...r/#post9039851

Une alternative est de définir une propriété j sur l'objet sur lequel est appelée la fonction de clic.
Je ne fais pas de jQuery, donc voici un exemple pas forcément très pertinent :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
for(let j = 0; j < interactions.length; j++){
	let ob_=$('#'+interactions[j]);
	ob_[0].j=j;
	ob_.click(function(){
        alert(j+", "+this.j); //j seul n'aura pas la bonne valeur sur IE11
    });
}

[pito2901]

for(i = 1; i <= $('#interactions').children().length; i++){... ?

<= au lieu de <, donc un élément vide en plus dans int[].

Non il n'y pas d'erreur ici, je push le tableau de 1 à 3 à cause de nth-child qui débute à 1 contrairement à d'autres sélecteurs qui commencent à 0.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
for(let j = 0; j < interactions.length; j++){
	let ob_=$('#'+interactions[j]);
	ob_[0].j=j;
	ob_.click(function(){
        alert(j+", "+this.j); //j seul n'aura pas la bonne valeur sur IE11
    });
}

Parfait ça fonctionne ! Merci beaucoup.

[Loralina]

Bonjour,
Une précision importante :
Mon premier exemple n'est pas tellement similaire à la boucle car je n'ai pas pris en compte la remontée de la déclaration de la fonction au début du contexte d'exécution.
Contrairement aux apparences, i ne vaut pas déjà 0 quand la fonction est définie.
L'analogie sera meilleure avec cet exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var i=0;
var a=function() {alert(i);};
i=3;
a();