[英]JS querySelectorAll function does not select intended css class
[英]my javascript queryselectorall does not capture the second class name as intended
我有兩個具有不同類別的圖像,但我希望將相同的 JavaScript 應用於兩者。 此 javascript 基本上允許通過單擊按鈕進行幻燈片放映,但這僅適用於帶有mySlides
class 的圖像,不適用於albums
class。 看一看:
var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { showDivs(slideIndex += n); } function showDivs(n) { var i; var x = document.querySelectorAll(".mySlides, .albums"); if (n > x.length) { slideIndex = 1 } if (n < 1) { slideIndex = x.length }; for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[slideIndex - 1].style.display = "block"; }
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/> <div class="inner"> <img class="mySlides" src="./imgs/IMG_1552.JPG"> <img class="mySlides" src="./imgs/IMG_0915.jpg"> <button class="w3-button w3-display-left" onclick="plusDivs(-1)">❮</button> <button class="w3-button w3-display-right" onclick="plusDivs(+1)">❯</button> </div> <div class="inner"> <img class="albums" src="./imgs/travis.jpg"> <img class="albums" src="./imgs/killy.jpg"> <button class="w3-button w3-display-left" onclick="plusDivs(-1)">❮</button> <button class="w3-button w3-display-right" onclick="plusDivs(+1)">❯</button> </div>
按鈕應該移動到下一個圖像,例如從“travis.jpg”到“killy.jpg”,但它僅適用於 mySlides class 而不是專輯 class
問題在於 var x = document.querySelectorAll(".mySlides, .albums"); 正如您必須了解的那樣,如果您想為兩個類的第二個元素執行此查詢,則此查詢將選擇所有 4 個元素,您必須使用 go
var x = document.querySelectorAll(".mySlides");
var y = document.querySelectorAll(" .albums");
並在兩個 var 上分別運行進一步的邏輯
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.