addEventListener仅工作一次

Question

我有一个事件监听器。 在其中，我遍历了3张图像，并对其应用了样式translateX(350px) 。 它工作得很好，但只能工作一次。

我单击一次鼠标右键，图像向右移动，但是如果再次单击鼠标右键，图像将不移动。 如何使事件监听器多次触发，使图像多次移动？ 关于堆栈溢出也有类似的问题，但我听不懂。

HTML：

<div id='container'>
  <div class='image-container'>
    <img class='move' src='images/news1.jpg'>
    <img class='move' src='images/news2.jpg'>
    <img class='move' src='images/news3.jpg'>
  </div>
</div>
<a href="#" id='arrow-left'>left</a>
<a href="#" id='arrow-right'>right</a>

JavaScript：

let imageContainer = document.querySelector('.image-container');
let arrowLeft = document.getElementById('arrow-left');
let arrowRight = document.getElementById('arrow-right');
let images = document.getElementsByClassName('move');

arrowRight.addEventListener('click', function() {
  for (i = 0; i < images.length; i++) {
    images[i].style.transition = "0.5s";
    images[i].style.transform = 'translateX(350px)';
  }
});

Answer 1

您可能需要对转换使用累加器，以便它们记住其先前的转换状态，例如，第一次为350，第二次为700，...等等：

尝试这个：

 var accum = 350; let imageContainer = document.querySelector('.image-container'); let arrowLeft = document.getElementById('arrow-left'); let arrowRight = document.getElementById('arrow-right'); let images = document.getElementsByClassName('move'); arrowRight.addEventListener('click' , function() { for (let i = 0 ; i < images.length; i++) { images[i].style.transition = "0.5s"; images[i].style.transform = 'translateX(' + accum + 'px)'; } accum+= 350; }); 

 <div id='container'> <div class='image-container'> <img class='move' src='images/news1.jpg'> <img class='move' src='images/news2.jpg'> <img class='move' src='images/news3.jpg'> </div> </div> <a href="#" id='arrow-left'>left</a> <a href="#" id='arrow-right'>right</a> 

Answer 2

演示： http : //jsfiddle.net/crmqj91t/15/ TranslateX引用了初始渲染位置。 因此，每当您将convertx设置为350px时，它相对于原点始终处于同一点。

我添加了一个步数计数器，它在每个步距上设置了距原点的正确距离。

 let imageContainer = document.querySelector('.image-container'); let arrowLeft = document.getElementById('arrow-left'); let arrowRight = document.getElementById('arrow-right'); let images = document.getElementsByClassName('move'); let step = 1; arrowRight.addEventListener('click', function() { for (i = 0; i < images.length; i++) { images[i].style.transition = "0.5s"; images[i].style.transform = 'translateX(' + step * 50 + 'px)'; } step++; });