Код Javascript не распространяется на все классы CSS, кроме первого. - PullRequest
Новая
       1

Код Javascript не распространяется на все классы CSS, кроме первого.

0 голосов
/ 15 января 2019

здесь три класса-оболочки, но мой код 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, но он не работает.

1 Ответ

0 голосов
/ 15 января 2019

Функция document.querySelector возвращает только один элемент. Если вы хотите вернуть несколько элементов с помощью селектора CSS, вы можете использовать document.querySelectorAll , а затем использовать цикл для изменения каждого элемента. элемент.

Пример: 

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

for(let e=0; e<elements.length; e++) {
  elements[e].classList.remove('classToRemove');
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...