如何在多個元素中使用同一幻燈片？

Question

我在模態內使用幻燈片放映。 它可以正常工作，但是要使用多個相同的組件我該怎么辦？ 我無法使用唯一ID，因為我不知道會有多少個ID。

這是我的兩個模態的HTML：

 var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); console.log(slides); var dots = document.getElementsByClassName("dot1"); if (n > 3) { slideIndex = 1; } if (n < 1) { slideIndex = slides.length; } for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active1", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active1"; } 

 <div class="grid-item set-bg osobj" data-setbg="img/portfolio/2.jpg"> <a class="myBtn"></a> <div class="myModal modal1"> <!-- Modal content --> <div class="modal1-content"> <span class="close1">&times;</span> <h2>smth</h2> <div class="post1-container"> <div class="post1-thumb"> <div class="slideshow1-container"> <div class="mySlides"> <div class="numbertext">1 / 3</div> <img src="img/portfolio/3.jpg" style="width: 550px; height: 450px;"> <div class="text1">Opis slike1</div> </div> <div class="mySlides"> <div class="numbertext">2 / 3</div> <img src="img/portfolio/4.jpg" style="width: 550px; height: 450px;"> <div class="text1">Opis Slike2</div> </div> <div class="mySlides"> <div class="numbertext">3 / 3</div> <img src="img/portfolio/6.jpg" style="width: 550px; height: 450px;"> <div class="text1">Opis Slike3</div> </div> <button class="prev1" onclick="plusSlides(-1)">&#10094;</button> <button class="next1" onclick="plusSlides(1)">&#10095;</button> </div> <br> <div style="text-align:center"> <span class="dot1" onclick="currentSlide(1)"></span> <span class="dot1" onclick="currentSlide(2)"></span> <span class="dot1" onclick="currentSlide(3)"></span> </div> </div> </div> </div> </div> </div> <!-- reference item --> <div class="grid-item set-bg osobj" data-setbg="img/portfolio/2.jpg"> <a class="myBtn"></a> <div class="myModal modal1"> <!-- Modal content --> <div class="modal1-content"> <span class="close1">&times;</span> <h2>smth</h2> <div class="post1-container"> <div class="post1-thumb"> <div class="slideshow1-container"> <div class="mySlides"> <div class="numbertext">1 / 3</div> <img src="img/portfolio/3.jpg" style="width: 550px; height: 450px;"> <div class="text1">Opis slike1</div> </div> <div class="mySlides"> <div class="numbertext">2 / 3</div> <img src="img/portfolio/4.jpg" style="width: 550px; height: 450px;"> <div class="text1">Opis Slike2</div> </div> <div class="mySlides"> <div class="numbertext">3 / 3</div> <img src="img/portfolio/6.jpg" style="width: 550px; height: 450px;"> <div class="text1">Opis Slike3</div> </div> <button class="prev1" onclick="plusSlides(-1)">&#10094;</button> <button class="next1" onclick="plusSlides(1)">&#10095;</button> </div> <br> <div style="text-align:center"> <span class="dot1" onclick="currentSlide(1)"></span> <span class="dot1" onclick="currentSlide(2)"></span> <span class="dot1" onclick="currentSlide(3)"></span> </div> </div> </div> </div> </div> </div> 

問題之一是幻燈片索引，因為它可以找到我所有的幻燈片，而不是模態中的那三個。 我需要以某種方式將滑塊的搜索限制為僅打開的模態。 什么是最好的方法，如何做以及為什么最好？

我玩過幻燈片索引，但沒有運氣，我似乎無法將javascript中的搜索限制在模態中的那些滑塊上。 滑塊必須在模態中全部使用相同的類“ mySlides”，因為我不知道會有多少個，我也想在javascript中找到解決方案。

Answer 1

我想到了。 因此，對於此類問題，這里有一個解決方案：

$('.myBtn').off().on('click',function(){
        $(this).next('.myModal').each(function(i,v){
            console.log($(this).find('.mySlides'));
    });
});