Javascript 代碼不適用於除第一個之外的所有 css 類

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 個解決方案

解決方案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