Question

我有这个功能：

const sliderTextChange = document.getElementsByClassName('slider') // text change

const changeSliderText = change => {
  const sliderLeft = document.getElementsByClassName('switch-left')
  const sliderRight = document.getElementsByClassName('switch-right')

  for (let i = 0; i < change.length; i++) {
    change[i].addEventListener('click', () => {
      sliderRight[i].style.display = 'flex';
      sliderLeft[i].style.display = 'none';
    });
  }
}

changeSliderText(sliderTextChange);

这是网站上的众多滑块之一：

<div class="flex-column">
  <h3>Text Colour</h3>
  <div class="slider">
    <div class="slider-back"></div>
    <div class="slider-circle"></div>
  </div>
  <h3 class="switch-left">White</h3>
  <h3 class="switch-right">Black</h3>
</div>

此功能与我代码中的许多其他功能非常相似，但它们仅触发一次。又说，我触发了事件监听器，但是我不能再次触发它。

这是什么问题？

Answer 1

我已尝试简化您的代码，并保持scope为模块化和可重用的视图。

function bindEvent() {
 const sliderList = document.querySelectorAll('.slider');
 [...sliderList].forEach((slider) => slider.addEventListener('click', () => {
    const left = slider.parentElement.querySelector('.switch-left');
    const right = slider.parentElement.querySelector('.switch-right');
    const leftDisplay = left.style.display || 'flex';
    const rightDisplay = right.style.display || 'none';
    left.style.display = rightDisplay;
    right.style.display = leftDisplay;
 }, false));
}

window.onload = bindEvent;

<div>
  <button class="slider"> - SLIDER 1 - </button>
  <div class="switch-left">L</div><div class="switch-right">R</div>
</div>
<div>
  <button class="slider"> - SLIDER 2 - </button>
  <div class="switch-left">L</div><div class="switch-right">R</div>
</div>
<div>
  <button class="slider"> - SLIDER 3 - </button>
  <div class="switch-left">L</div><div class="switch-right">R</div>
</div>
<div>
  <button class="slider"> - SLIDER 4 - </button>
  <div class="switch-left">L</div><div class="switch-right">R</div>
</div>

为功能选择的参数并不是很直观，会使示例更加复杂。

我们使用querySelector，它读起来更好，但是如果您更喜欢速度，那就去getElementsByClassName，它也可以在任何DOM元素上使用。

为什么我只能触发一次此功能？

1 个答案: