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

Question

here are three wrapper class but my javascript code is only applying to the first one, i want before and after effect in my image but only first image is responding to that这里有三个包装类，但我的 javascript 代码仅适用于第一个，我想要图像中的前后效果，但只有第一个图像响应

This is my code这是我的代码

 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>

i expected it to apply to all the classes but it only applies to the first one, i tried doing getElementByClassName but it is not working.我希望它适用于所有类，但它仅适用于第一个，我尝试执行 getElementByClassName 但它不起作用。

Answer 1

The document.querySelector function only return one element, if you want to return multiple elements with a CSS selector, you can use document.querySelectorAll then use a loop to modify each element. document.querySelector函数只返回一个元素，如果你想用 CSS 选择器返回多个元素，你可以使用document.querySelectorAll然后使用循环来修改每个元素。

Example:例子：

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

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

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

问题描述

1 个解决方案

解决方案1
0 2019-01-15 09:50:02

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

问题描述

1 个解决方案

解决方案1 0 2019-01-15 09:50:02

解决方案1
0 2019-01-15 09:50:02