关闭!: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没有块作用域(for
,if
,while
等),他们无法移动到函数的顶部。 从ES6开始,您可以let
用来获取块范围的变量。
当您的代码运行时,会发生以下情况:在for
循环中添加click回调并分配@R_668_2419@a
,但是其值在下一次迭代中将被覆盖。当点击事件触发回调运行和的值@R_668_2419@a
是始终在列表的最后一个元素。