javascript: addEventListener in Schleife funktioniert nicht. Passing gleiche Parameter, um mit jeder Schleife zu funktionieren

Question

Ich habe versucht, die Lösungen in diesen beiden Threads angeboten, jedoch keiner von ihnen funktioniert.

Javascript multiple dynamic addEventListener created in for loop - passing parameters not working

JavaScript closure inside loops – simple practical example

So, hier ist, wo ich bin.

Hier meine Schleife ist:

var eduWidths = [415.66, 116.13]; 

function eduResize(j,el){ 
      var edu = document.getElementById(el); 
      console.log("j: "+j+" , el: "+ el +" , eduWidths[j]: "+eduWidths[j]); //output: "j: 1 , el: edu0 , eduWidths[j]: 116.13" 

      //this does not work, j is always "1" 
      $(edu).animate({width: eduWidths[j]+'px'}, 500); 
     } 

for(i=0; i<edus.length; i++){ 
    var edu = document.getElementById('edu'+i); 

    edu.addEventListener("mouseover",function(){ 
     //this works without any problem 
     $(this).animate({width:'400px'}, 500); 
    }); 

    var j=0; 
    edu.addEventListener('mouseleave', function() { 
     //this does call the eduResize function, and passes j and this.id 
      eduResize(j,this.id); 

     }); 
    j++; 
} 

Trotz das richtige Ziel hat, wird das Ziel div immer Ändern der Größe auf dieser Linie die 1 Indexposition eduWidths [] Array:

$(edu).animate({width: eduWidths[j]+'px'}, 500); 

UPDATE: Hier ist der HTML:

<div class="eduEvent" id="edu0" ></div> 
<div class="eduEvent" id="edu1" ></div> 

Answer 1

Es gab eine Antwort hier, die gelöscht wurde, das half mir, das Problem zu lösen.

Ist dies der effizienteste und richtigste Weg, dies zu tun?

Dies ist, was schließlich bekam sie zu arbeiten:

var eduWidths = [415.66, 116.13]; 

function eduResize(j,el){ 
      var edu = document.getElementById(el); 
      console.log("j: "+j+" , el: "+ el +" , eduWidths[j]: "+eduWidths[j]); 
      $(edu).animate({width: eduWidths[j]+'px'}, 500); 
     } 


for(i=0; i<edus.length; i++){ 
var edu = document.getElementById('edu'+i); 

      edu.addEventListener("mouseover",function(){ 
       //this.style.width = "400px"; 
       $(this).animate({width:'400px'}, 500); 
       //console.log("this.id: "+ this.id); 
      }); 


      edu.addEventListener('mouseleave', (function iife(currentJ) { 
       return function() { 
       eduResize(currentJ, this.id); 
       }; 
      })(i)); // <-- here you pass j, which will become currentJ inside the iife 


}//end loop 

Answer 2

Wenn Sie einen Ereignis-Listener hinzufügen, setzt javascript ihn tatsächlich auf die Seite und führt ihn aus, nachdem Ihr anderer Code ausgeführt wurde. An diesem Punkt würde Ihr j-Wert auf edus.length erhöht werden.

Sie müssen lexikalischen Bereich mit einer Funktion wie dieser erstellen.

(function(index){ 
    edu.addEventListener('mouseleave', function() { 
    //this does call the eduResize function, and passes j and this.id 
     eduResize(index,this.id); 
})(j);