Javascript 代码不适用于除第一个之外的所有 css 类答案

【问题标题】：Javascript code is not applying to all the css classes except the first oneJavascript 代码不适用于除第一个之外的所有 css 类
【发布时间】：2019-01-15 09:08:42
【问题描述】：

这里有三个包装类，但我的 javascript 代码仅适用于第一个，我希望在我的图像中使用前后效果，但只有第一个图像对此做出响应

这是我的代码

let active = false;

document.querySelector('.scroller').addEventListener('mousedown', function () {
  active = true;
  document.querySelector('.scroller').classList.add('scrolling');
});

document.body.addEventListener('mouseup', function () {
  active = false;
  document.querySelector('.scroller').classList.remove('scrolling');
});
document.body.addEventListener('mouseleave', function () {
  active = false;
  document.querySelector('.scroller').classList.remove('scrolling');
});

document.body.addEventListener('mousemove', function (e) {
  if (!active) return;
  let x = e.pageX;
  x -= document.querySelector('.wrapper').getBoundingClientRect().left;
  scrollIt(x);
});

function scrollIt(x) {
  let transform = Math.max(0, Math.min(x, document.querySelector('.wrapper').offsetWidth));
  document.querySelector('.after').style.width = transform + "px";
  document.querySelector('.scroller').style.left = transform - 25 + "px";
}

scrollIt(150);

document.querySelector('.scroller').addEventListener('touchstart', function () {
  active = true;
  document.querySelector('.scroller').classList.add('scrolling');
});
document.body.addEventListener('touchend', function () {
  active = false;
  document.querySelector('.scroller').classList.remove('scrolling');
});
document.body.addEventListener('touchcancel', function () {
  active = false;
  document.querySelector('.scroller').classList.remove('scrolling');
});

<!DOCTYPE html><html lang='en' class=''>
<head>
    <link rel="stylesheet" href="style.css">
</head><body>
<div class="wrapper">
  <div class="before">
    <img class="content-image" src="https://farm2.staticflickr.com/1638/26145024230_06acd55d1b_b.jpg" draggable="false"/>   </div>
    <div class="after">
        <img class="content-image" src="https://farm2.staticflickr.com/1663/25814974803_d4c55ff708_b.jpg" draggable="false"/>
    </div>
    <div class="scroller">
    <svg class="scroller__thumb" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><polygon points="0 50 37 68 37 32 0 50" style="fill:#fff"/><polygon points="100 50 64 32 64 68 100 50" style="fill:#fff"/></svg>
  </div>
</div>
<div class="wrapper">
    <div class="before">
      <img class="content-image" src="https://farm2.staticflickr.com/1638/26145024230_06acd55d1b_b.jpg" draggable="false"/>   </div>
      <div class="after">
          <img class="content-image" src="https://farm2.staticflickr.com/1663/25814974803_d4c55ff708_b.jpg" draggable="false"/>
      </div>
      <div class="scroller">
      <svg class="scroller__thumb" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><polygon points="0 50 37 68 37 32 0 50" style="fill:#fff"/><polygon points="100 50 64 32 64 68 100 50" style="fill:#fff"/></svg>
    </div>
  </div>

  <div class="wrapper">
    <div class="before">
      <img class="content-image" src="https://farm2.staticflickr.com/1638/26145024230_06acd55d1b_b.jpg" draggable="false"/>   </div>
      <div class="after">
          <img class="content-image" src="https://farm2.staticflickr.com/1663/25814974803_d4c55ff708_b.jpg" draggable="false"/>
      </div>
      <div class="scroller">
      <svg class="scroller__thumb" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><polygon points="0 50 37 68 37 32 0 50" style="fill:#fff"/><polygon points="100 50 64 32 64 68 100 50" style="fill:#fff"/></svg>
    </div>
  </div>

</body></html>

我希望它适用于所有类但它只适用于第一个，我尝试做 getElementByClassName 但它不起作用。

【问题讨论】：

来自 MDN：The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.
那我应该使用 getElementsByClassName 还是 for 循环来遍历类的数组？
在定位类时应该始终使用 getElementByClassName，它比查询选择器性能更高
正如@Dellirium 所说，getElementsByClassName（不要忘记元素中的s）和getElementById 速度非常快，应该优先于其他选择器函数，因为它们速度较慢。您可以对元素数组执行 for 循环，并将侦听器添加到循环内的每个元素。
还要记住返回值不是数组而是html集合，所以要小心

标签： javascript html arrays css

【解决方案1】：

document.querySelector函数只返回一个元素，如果你想用一个CSS选择器返回多个元素，你可以使用document.querySelectorAll然后使用循环来修改每个元素。

示例：

let elements = document.querySelectorAll('.class');

for(let e=0; e<elements.length; e++) {
  elements[e].classList.remove('classToRemove');
}

【讨论】：

为什么是querySelectorAll 而不是getElementsByClassName？搜索一个简单的类时，它会慢很多并且不需要。
我做出了回答来解释为什么 querySelector 不能在具有多个结果的 CSS 选择器上工作，但如果它只是一个带有类的选择器，getElementsByClassName 当然会更好。 @Art3mix