javascript - 通过 for 循环向元素添加事件会导致所有元素仅影响循环中的最后一个元素

Question

编辑:我找到了替代解决方案。我还无法回答我的问题，因为它太新了，而且我的代表太低了。但，这是我所做的:

addIdToElements();
$(window).click(function(e){
  console.log('clicked'+ e.target.parentNode.id.replace("slider-arrow-right","")
})

.content {
  position: relative;
}

.arrow-container {
  position: relative;
  top: -38px;
  width: 110%;
}

.slider-arrow {
  position: absolute;
}

.slider-arrow-right {
  right: 0px;
}

.outer {
  display: flex;
  overflow-x: auto;
  height: 100%;
}

.inner {
  flex: 0 0 25%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content" style="width: 400px; height:25px; margin-bottom: 10px;">
  <div class="outer" style="margin: 0 20px; overflow-x: auto; width:100%; height: 100%">
    <div class="inner" style="float: left; margin: 0px; width:25%; height: 100%; background-color: blue;">
    </div>
    <div class="inner" style="float: left; margin: 0px;  width:25%; height: 100%; background-color: orange;">
    </div>
    <div class="inner" style="float: left; margin: 0px;  width:25%; height: 100%; background-color: green;">
    </div>
    <div class="inner" style="float: left; margin: 0px;  width:25%; height: 100%; background-color: purple;">
    </div>
    <div class="inner" style="float: left; margin: 0px;  width:25%; height: 100%; background-color: yellow;">
    </div>
  </div>
  <div class="arrow-container">
    <div class="slider-arrow slider-arrow-left">
      <p class="stretch">&lt;</p>
    </div>
    <div class="slider-arrow slider-arrow-right">
      <p class="stretch">&gt;</p>
    </div>
  </div>
</div>

<div class="content" style="width: 400px; height:25px; margin-bottom: 10px;">
  <div class="outer" style="margin: 0 20px; overflow-x: auto; width:100%; height: 100%">
    <div class="inner" style="float: left; margin: 0px; width:25%; height: 100%; background-color: blue;">
    </div>
    <div class="inner" style="float: left; margin: 0px;  width:25%; height: 100%; background-color: orange;">
    </div>
    <div class="inner" style="float: left; margin: 0px;  width:25%; height: 100%; background-color: green;">
    </div>
    <div class="inner" style="float: left; margin: 0px;  width:25%; height: 100%; background-color: purple;">
    </div>
    <div class="inner" style="float: left; margin: 0px;  width:25%; height: 100%; background-color: yellow;">
    </div>
  </div>
  <div class="arrow-container">
    <div class="slider-arrow slider-arrow-left">
      <p class="stretch">&lt;</p>
    </div>
    <div class="slider-arrow slider-arrow-right">
      <p class="stretch">&gt;</p>
    </div>
  </div>
</div>

我正在尝试在我的 div 上制作可点击的箭头，这将按 clientWidth 水平滚动 div。然而，当我单击第一个 div 箭头时，它会影响第二个 div。正如您在下面的代码中看到的，当我单击第一个 div 的右箭头时，clicked2 显示在控制台而不是 click1 上。有人可以帮我指出正确的方向吗？

编辑:删除了不相关的代码。

function addIdToElements() {
  var outerElements = document.getElementsByClassName("outer");
  var rightArrowElements = document.getElementsByClassName("slider-arrow-right");
  var leftArrowElements = document.getElementsByClassName("slider-arrow-left");
  for (var i = 0; i < outerElements.length; i++) {
    outerElements[i].id = "outer-" + i.toString();
    rightArrowElements[i].id = "slider-arrow-right-" + i.toString();
    leftArrowElements[i].id = "slider-arrow-left-" + i.toString();
  }
}

addIdToElements();
var outerClassElements = document.getElementsByClassName('outer');
for (var i = 0; i < outerClassElements.length; i++) {
  var currentOutterSection = document.getElementById('outer-' + i.toString());
  var currentRightArrow = document.getElementById('slider-arrow-right-' + i.toString());
  var currentLeftArrow = document.getElementById('slider-arrow-left-' + i.toString());
  currentRightArrow.addEventListener('click', function() {
    console.log('clicked' + i);
  })
}

.content {
  position: relative;
}

.arrow-container {
  position: relative;
  top: -38px;
  width: 110%;
}

.slider-arrow {
  position: absolute;
}

.slider-arrow-right {
  right: 0px;
}

.outer {
  display: flex;
  overflow-x: auto;
  height: 100%;
}

.inner {
  flex: 0 0 25%;
}

<div class="content" style="width: 400px; height:25px; margin-bottom: 10px;">
  <div class="outer" style="margin: 0 20px; overflow-x: auto; width:100%; height: 100%">
    <div class="inner" style="float: left; margin: 0px; width:25%; height: 100%; background-color: blue;">
    </div>
    <div class="inner" style="float: left; margin: 0px;  width:25%; height: 100%; background-color: orange;">
    </div>
    <div class="inner" style="float: left; margin: 0px;  width:25%; height: 100%; background-color: green;">
    </div>
    <div class="inner" style="float: left; margin: 0px;  width:25%; height: 100%; background-color: purple;">
    </div>
    <div class="inner" style="float: left; margin: 0px;  width:25%; height: 100%; background-color: yellow;">
    </div>
  </div>
  <div class="arrow-container">
    <div class="slider-arrow slider-arrow-left">
      <p class="stretch">&lt;</p>
    </div>
    <div class="slider-arrow slider-arrow-right">
      <p class="stretch">&gt;</p>
    </div>
  </div>
</div>

<div class="content" style="width: 400px; height:25px; margin-bottom: 10px;">
  <div class="outer" style="margin: 0 20px; overflow-x: auto; width:100%; height: 100%">
    <div class="inner" style="float: left; margin: 0px; width:25%; height: 100%; background-color: blue;">
    </div>
    <div class="inner" style="float: left; margin: 0px;  width:25%; height: 100%; background-color: orange;">
    </div>
    <div class="inner" style="float: left; margin: 0px;  width:25%; height: 100%; background-color: green;">
    </div>
    <div class="inner" style="float: left; margin: 0px;  width:25%; height: 100%; background-color: purple;">
    </div>
    <div class="inner" style="float: left; margin: 0px;  width:25%; height: 100%; background-color: yellow;">
    </div>
  </div>
  <div class="arrow-container">
    <div class="slider-arrow slider-arrow-left">
      <p class="stretch">&lt;</p>
    </div>
    <div class="slider-arrow slider-arrow-right">
      <p class="stretch">&gt;</p>
    </div>
  </div>
</div>

Answer 1

当在“for”循环内使用变量并在该循环内使用事件时，当事件触发时，您将指向该变量的最后一个值。相反，设置一个外部函数，将当前变量值作为参数传递给该函数(它们将具有新的作用域)，并从那里创建事件。

例如:

for (var i = 0; i < elements; i++) {
  setAction(elements[i], i, elements);
}

function setAction(element, i, elements) {
  // console.log(element, i, elements);
  // element.addEventListener...
}

或者使用等效的“forEach”循环来避免此类问题:

elements.forEach(function(element, i, elements) {
  // console.log(element, i, elements);
  // element.addEventListener...
});

https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/forEach