遍历数组并添加事件监听器"click".每个 [英] Loop through array and add event listener "click" to each

问题描述

我正在尝试遍历一系列元素，并为每个元素添加一个事件侦听器.

I'm trying to iterate through an array of of elements and add an event listener to each one.

填充数组:

var sliders = [].slice.call(document.getElementsByClassName("sliderControlLi"));

遍历数组:

sliders.forEach(function (i){
  addEventListener("click", function(){
    console.log("you clicked slider controler " + this.index + "!");
  });
});

但是使用此代码，每当我单击任何一个滑块时，我都会得到多个console.log打印输出-数组中的每个滑块一次.

But with this code, whenever I click on any of the sliders I get multiple console.log printouts - once for each slider in the array.

我一直在寻找类似的问题，但是我仍然无法解决这个问题.

I've looked for similar problems, but I'm still unable to solve this one.

感谢您的帮助！

推荐答案

您应使用 您还可以从 希望这会有所帮助.

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>

这篇关于遍历数组并添加事件监听器"click".每个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！