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'));
    });
});

如何在多个元素中使用同一幻灯片？

1 个答案: