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。如下面的代码所示，当我单击第一个div的向右箭头时，将显示clicked2而不是click1进行控制台。有人可以帮我指出正确的方向吗？

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

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

1 个答案: