11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] TransitionEnd multiples

Bonjour

Voici un extrait de mon script

document.getElementById("i0").addEventListener("transitionEnd",function(){ retour(0)},false);
document.getElementById("i1").addEventListener("transitionEnd",function(){ retour(1)},false);
document.getElementById("i2").addEventListener("transitionEnd",function(){ retour(2)},false);
document.getElementById("i3").addEventListener("transitionEnd",function(){ retour(3)},false);

je cherche à exécuter ces 4 initialisations en une seule ligne de la forme

for(i=0;i<=3;i++) { id="i"+i; document.getElementById(id).addEventListener("transitionend",(function(){ retour(i)})(i),false)}

Mais avec cette syntaxe, les 4 événements sont initialisés avec la fonction retour(3)

Où est l'erreur ?

Merci de votre aide éventuelle
Modifié par Colnem (12 Aug 2016 - 11:38)
Bonjour !

Si je ne m'abuse, ce genre de problème se règle avec les 'closures'.

Mais je ne suis pas une spécialiste (et surtout pas des closures...)

Smiley smile
Merci

Effectivement, sans doute un problème de portée et de durée de vie de variables.

Mais j'avoue sécher sur la bonne syntaxe !
Modérateur
bonjour, en séparant pour la clarté:

for(i=0;i<=3;i++) { 
  id="i"+i;
  document.getElementById(id).addEventListener("transitionend",(function(){ 
    retour(i)
  })(i),false);
}

devient

var setRetour = function(i){
  return function(){
    retour(i);
  };
} 
for(i=0;i<=3;i++) { 
  id="i"+i;
  document.getElementById(id).addEventListener("transitionend",setRetour(i),false);
}

Modifié par kustolovic (11 Aug 2016 - 18:54)
Modérateur
En plus concis et en une ligne on pourrait aussi ajouter une variable:

document.getElementById(id).addEventListener("transitionend",(function(j){ return function(){ retour(j); }; })(i),false);

mais c'est de moins en moins lisible;
Félicitations

Ca marche, effectivement.
Et en plus j'ai compris. J'avais bien compris mon problème, notamment grâce à Zelena, mais je n'arrivais pas à trouver la bonne syntaxe. C'est la première fois que je gère des éléments transitionnels multiples en js.

Donc, mille mercis à chacun de vous.

C'est quand même bien, internet. Et alsacréations en particulier.

Pour le plaisir du travail accompli, voici l'adresse de la page ...
http://s244775206.onlinehome.fr/marlene/M58/index.asp

Les transitions sont sur le tableau de portraits.

Comment fait-on pour maquer "Résolu" ?
Modifié par Colnem (11 Aug 2016 - 19:48)
Bonjour !

Colnem a écrit :


Comment fait-on pour marquer "Résolu" ?


Il faut modifier le titre de votre premier post.

Smiley smile
Sujet clos
Aller à