您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

使用循环和传递值的addEventListener [重复]

使用循环和传递值的addEventListener [重复]

关闭!:D

此固定代码按预期工作:

// Function to run on click:

function makeItHappen(elem, elem2) {

    var el = document.getElementById(elem);

    el.style.backgroundColor = "red";

    var el2 = document.getElementById(elem2);

    el2.style.backgroundColor = "blue";

}



// Autoloading function to add the listeners:

var elem = document.getElementsByClassName("triggerClass");



for (var i = 0; i < elem.length; i += 2) {

    (function () {

        var k = i + 1;

        var @R_668_2419@a = elem[i].parentNode.id;

        var @R_668_2419@b = elem[k].parentNode.id;

        elem[i].addEventListener("click", function() { makeItHappen(@R_668_2419@a,@R_668_2419@b); }, false);

        elem[k].addEventListener("click", function() { makeItHappen(@R_668_2419@b,@R_668_2419@a); }, false);

    }()); // immediate invocation

}


<div class="container">

  <div class="one" id="@R_668_2419@1">

    <p class="triggerClass">some text</p>

  </div>

  <div class="two" id="@R_668_2419@2">

    <p class="triggerClass">some text</p>

  </div>

</div>



<div class="container">

  <div class="one" id="@R_668_2419@3">

    <p class="triggerClass">some text</p>

  </div>

  <div class="two" id="@R_668_2419@4">

    <p class="triggerClass">some text</p>

  </div>

</div>
for(var i=0; i < elem.length; i+=2){
    var k = i + 1;
    var @R_668_2419@a = elem[i].parentNode.id;
    var @R_668_2419@b = elem[k].parentNode.id;

    elem[i].addEventListener("click", function(){makeItHappen(@R_668_2419@a,@R_668_2419@b);}, false);
    elem[k].addEventListener("click", function(){makeItHappen(@R_668_2419@b,@R_668_2419@a);}, false);
}

实际上是非严格的JavaScript。解释如下:

var i, k, @R_668_2419@a, @R_668_2419@b;
for(i=0; i < elem.length; i+=2){
    k = i + 1;
    @R_668_2419@a = elem[i].parentNode.id;
    @R_668_2419@b = elem[k].parentNode.id;

    elem[i].addEventListener("click", function(){makeItHappen(@R_668_2419@a,@R_668_2419@b);}, false);
    elem[k].addEventListener("click", function(){makeItHappen(@R_668_2419@b,@R_668_2419@a);}, false);
}

由于变量提升,因此var声明将移动到作用域的顶部。由于JavaScript没有块作用域(forifwhile等),他们无法移动到函数的顶部。 从ES6开始,您可以let用来获取块范围的变量。

当您的代码运行时,会发生以下情况:在for循环中添加click回调并分配@R_668_2419@a,但是其值在下一次迭代中将被覆盖。当点击事件触发回调运行和的值@R_668_2419@a是始终在列表的最后一个元素。

使用闭包(关闭的值@R_668_2419@a@R_668_2419@b等等),将值绑定到点击处理程序的作用域。

其他 2022/1/1 18:15:00 有435人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶