[英]my javascript queryselectorall does not capture the second class name as intended
I have two images with different classes but I want the same JavaScript to be applied to both.我有两个具有不同类别的图像,但我希望将相同的 JavaScript 应用于两者。 This javascript basically allows for a slideshow by clicking on the button, but this only works for the images with the
mySlides
class, not the albums
class.此 javascript 基本上允许通过单击按钮进行幻灯片放映,但这仅适用于带有
mySlides
class 的图像,不适用于albums
class。 Take a look:看一看:
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>
The buttons are supposed to move to the next image eg from "travis.jpg" to "killy.jpg" but it only works for the mySlides class and not the albums class按钮应该移动到下一个图像,例如从“travis.jpg”到“killy.jpg”,但它仅适用于 mySlides class 而不是专辑 class
The issue lies in var x = document.querySelectorAll(".mySlides, .albums");问题在于 var x = document.querySelectorAll(".mySlides, .albums"); As you have to understand that this query selects all the 4 elements if you want to do for the second element of both classes you would have to go with
正如您必须了解的那样,如果您想为两个类的第二个元素执行此查询,则此查询将选择所有 4 个元素,您必须使用 go
var x = document.querySelectorAll(".mySlides");
var y = document.querySelectorAll(" .albums");
and run the further logic on both var seperately并在两个 var 上分别运行进一步的逻辑
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.