滑动器 JS。第三页及后续页面上的按钮不起作用

Question

请帮忙解决这个问题，因为我真的不明白为什么“后退”按钮在第 2 和第 3 页不起作用。

我想制作一个类似于游戏菜单的网站，就像 Deus Ex The Fall 中那样。我将此 swiper js 用于此，因为我需要所有背景都带有视差的滑块。但是出了点问题。

const swiper = new Swiper('.swiper', {
  // Optional parameters
  direction: 'horizontal',
  
  parallax: true,
  

});

document.querySelector('.back').onclick = () => {
  swiper.slideTo(0)
}

document.querySelector('.page1').onclick = () => {
  swiper.slideTo(1)
}

document.querySelector('.page2').onclick = () => {
  swiper.slideTo(2)
}

document.querySelector('.page3').onclick = () => {
  swiper.slideTo(3)
}

...
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Testttt</title>
    <link rel="stylesheet" href="./swiperjs/swiper-bundle.min.css">
    <link rel="stylesheet" href="./index.css">
    ...
<body>
            <div class="swiper">  
              <div class="swiper-wrapper">  
                <div class="parallax-bg" style="background-image:url(./images/panorama.jpg)" 
                data-swiper-parallax="100%"></div>
                    <!-- Slides --> 
                    <div class="swiper-slide">
                        <h1>Page 0</h1>
                      <div class="buttons">
                        <button class="page1">Page1</button>
                        <button class="page2">Page2</button>
                        <button class="page3">Page3</button>
                      </div>
                    </div>

第 1 页上的“后退”按钮正常工作

                    <div class="swiper-slide">
                        <h1>Page 1</h1>
                      <div class="buttons">
                        <button class="back">Back</button>
                      </div>
                    </div>

但这里 none 个按钮可以使用了

                    <div class="swiper-slide">
                        <h1>Page 2</h1>
                      <div class="buttons">
                        <button class="back">Back</button>
                      </div>
                    </div>
                    <div class="swiper-slide">
                        <h1>Page 3</h1>
                      <div class="buttons">
                        <button class="back">Back</button>
                      </div>
                    </div>  
            </div>
        </div>

    <script src="./swiperjs/swiper-bundle.min.js"></script>
    <script src="./index.js"></script>
</body>
</html>

Answer 1

您正在使用 querySelector 设置事件侦听器。 querySelector 仅选择具有该选择器的元素的第一个实例，因此 none 您的其他人正在收听。

尝试改用 querySelectorAll。这将为您提供具有该选择器的所有元素的集合，您可以遍历该选择器以设置事件侦听器：

const els = document.querySelectorAll('.back');
els.forEach ( el => {
  el.onclick = () => {
  swiper.slideTo(0)
}
});

虽然我猜你会想要改变在 slideTo 中传递的相关参数。（也许使用 for 循环而不是 forEach）。

滑动器 JS。第三页及后续页面上的按钮不起作用

Swiper JS. Buttons on the third and subsequent pages do not work

html

javascript

css

slider

swiperjs