Question

我已经尝试过这两个线程中提供的解决方案，但是，它们都没有工作。

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

JavaScript closure inside loops – simple practical example

所以这就是我所处的位置。

这是我的循环：

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++;
}

尽管具有正确的目标，但目标div始终使用此行上的eduWidths []数组的1索引位置进行大小调整：

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

更新这是HTML：

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

Answer 1

这里有一个被删除的答案，这有助于我解决问题。

这是最有效和最恰当的方法吗？

最终让它发挥作用：

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

当你添加一个事件监听器时，javascript实际上将它放在一边并在执行所有其他代码之后执行它，此时你的j值将增加到edus.length。

您需要使用这样的函数创建词法范围。

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

javascript：循环中的addEventListener不起作用。将相同的参数传递给每个循环的函数

2 个答案: