-3

我有一个滑块，它在桌面上显示旋转幻灯片，带有滑动滑块，我在移动设备上破坏了滑块，并想显示 3 个不使用显示更多按钮旋转的静态幻灯片。

我为除前 3 个元素之外的所有元素添加了一个名为 hidden 的类，并添加了一个按钮以在单击时显示更多幻灯片。

现在，当您单击按钮时，我想从所有幻灯片元素中删除隐藏类，但它不起作用。

这是HTML：

<div class="icon-slider">

<div class="swiper-container js-icon-slider">

    <div class="swiper-wrapper">

        <div class="swiper-slide">
            <div class="img-wrap">image here</div>
        </div>
        <div class="swiper-slide">
            <div class="img-wrap">image here</div>
        </div>
        <div class="swiper-slide">
            <div class="img-wrap">image here</div>
        </div>
        <div class="swiper-slide">
            <div class="img-wrap">image here</div>
        </div>
        <div class="swiper-slide">
            <div class="img-wrap">image here</div>
        </div>
        <div class="swiper-slide">
            <div class="img-wrap">image here</div>
        </div>

    </div>

</div>

还有我的 JS 代码：

 var slider = document.querySelector('.icon-slider'),
     slides = slider.querySelectorAll('.swiper-slide'),
     btnMore = '<div class="more-btn-wrap"><button class="wp-block-button__link">View all</button></div>';

    for (let i = 2; i < slides.length; i++) {
        slides[i].classList.add('hidden');
    }

    if (!slider.querySelector(".more-btn-wrap")) {
        slider.innerHTML = slider.innerHTML + btnMore;
    }

    let btn = document.querySelector('.more-btn-wrap');

    btn.addEventListener('click', function () {
        this.remove();

        slides.forEach(slide => slide.classList.remove('hidden'));
    });

当我尝试将这条线放在控制台中时，它按预期工作，所以我认为它与 addEventListener 有关

slides.forEach(slide => slide.classList.remove('hidden'));
4

1 回答 1

-3

您不需要 2 个 for 循环，在 for 循环中添加 eventlistener 并在 addeventlistener 中删除第二个 for 循环还删除 3 并键入 0 以从 0 开始循环

    <style type="text/css">

        .slide {
          width: 80px;
          height: 80px;
          background-color: red;
          border: 2px solid blue;
        }
        .hidden {
          opacity: 0.1;
        }

    </style>

    <button class="btn">Button</button>
    <div class="slider">
       <div class="slide">Slide1</div>
       <div class="slide">Slide2</div>
       <div class="slide">Slide3</div>
    </div>

<script>

    let btn = document.querySelector('.btn');
    let slider = document.querySelector('.slider');
    let slides = slider.querySelectorAll('.slide');

    for (let i = 0; i < slides.length; i++) {
        slides[i].classList.add('hidden');
        btn.addEventListener('click', function() {

                slides[i].classList.remove('hidden');

        });
    }

</script>
于 2020-06-14T07:22:53.183 回答