добавление событий в элементы с помощью цикла 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, которые будут прокручивать элемент div по горизонтали с помощью clientWidth.Однако когда я нажимаю на стрелку первого элемента div, это влияет на второй элемент div.Как вы можете видеть из кода ниже, clicked2 отображается в консоли вместо click1, когда я нажимаю стрелку вправо первого div.Может кто-нибудь, пожалуйста, помогите указать мне правильное направление?

edit: удален неактуальный код.

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