时间戳

首页 > 解决方案 > addEventListener 只工作一次

javascript - addEventListener 只工作一次

问题描述

我有一个事件监听器。在里面，我循环浏览 3 张图片并对其应用样式translateX(350px)。它工作得很好，但它只工作一次。

我单击一次右键，图像向右移动，但如果我再次单击右键，图像不会移动。如何使事件侦听器多次触发以使图像多次移动？Stack Overflow 上有一个类似的问题，但我无法理解。

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)';
  }
});

标签： javascripthtml

解决方案

您可能需要为您的转换使用累加器，以便他们记住之前的翻译状态，例如，第一次为 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>

推荐阅读