我正在尝试迭代一系列元素并为每个元素添加一个事件监听器。
填充数组:
sliders.forEach(function (i){
addEventListener("click", function(){
console.log("you clicked slider controler " + this.index + "!");
});
});
迭代数组:
{{1}}
但是使用这段代码,每当我点击任何一个滑块时,我都会获得多个console.log打印输出 - 一次为阵列中的每个滑块。
我已经找到了类似的问题,但我仍然无法解决这个问题。
感谢您的帮助!
答案 0 :(得分:7)
您应该使用 addEventListener()
作为:
target.addEventListener(type, listener[, options]);
您还可以从 forEach
获取索引:
arr.forEach(function ( element_value,element_index ){ })
希望这有帮助。
var sliders = [].slice.call(document.getElementsByClassName("sliderControlLi"));
sliders.forEach(function (element, index){
element.addEventListener("click", function(){
console.log("you clicked slider controler " +index + "!");
});
});
<div class="sliderControlLi">slider 1</div>
<div class="sliderControlLi">slider 2</div>
<div class="sliderControlLi">slider 3</div>
<div class="sliderControlLi">slider 4</div>
答案 1 :(得分:3)
您应该使用
EventTarget.addEventListener(...)
^^^^^^^^^^^^
所以在你的情况下
sliders.forEach(function (elem){
elem.addEventListener(...);
});