Question

这是三个包装器类，但是我的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，但它不起作用。

Answer 1

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

示例：

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

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

Javascript代码不适用于除第一个以外的所有CSS类

1 个答案: