给多个按钮一个 EventListener

Question

我正在制作一个包含轮播和按钮的网站。 当您单击按钮时，它会向左或向右移动轮播以查看更多或以前的内容。 我首先创建了两个函数，一个用于后退按钮，一个用于前进按钮。 它有效，但我意识到我需要为所有按钮制作它，因为我有多个旋转木马。

var nextButton = document.querySelectorAll('.button-forward');
var backButton = document.querySelectorAll('.button-back');

nextButton.addEventListener('click', function() {
itemContainer.style.transform = 'translateX(-40%)';
});


backButton.addEventListener('click', function() {
itemContainer.style.transform = 'translateX(10%)';
});

我尝试使用document.querySelectorAll存储所有前进和后退按钮，并为它们提供一个 forEach 方法，其中是它们的事件侦听器。 其他两个旋转木马按钮仍然不起作用，我也尝试将它们制作成一个数组，看看是否有帮助，但它没有改变任何东西。 总而言之，我想把事件监听器提供给所有成对的按钮，而不是只有一个。 你们能帮帮我吗？ 如果您需要更好的描述，请告诉我！

var nextButton = document.querySelectorAll('.button-forward');
var backButton = document.querySelectorAll('.button-back');


nextButton.forEach(button => {
  button.addEventListener('click', nextButton => {
    itemContainer.style.transform = 'translateX(-40%)';
  })
})

backButton.forEach(button => {
  button.addEventListener('click', backButton => {
    itemContainer.style.transform = 'translateX(10%)';
  })
})

对于那些想知道的人来说，这是我的 HTML 旋转木马结构：我使用main元素将我的旋转木马的各个部分保持在一起，里面是 visible_items div，它只显示其中带有overflow: scroll 。里面其中 os item_container 仅包含项目。 ion-icons或按钮位于主要元素的顶部和底部，当您单击它们时，它们会使 item_container 向左或向右平移，从而使 visible_items div 中显示的项目发生变化。

    <ion-icon name="chevron-back-outline" class="button-back"></ion-icon>
        <main>
            <h1>Poular Shoes</h1>
            <div class="visible_items">
                <div class="item_container">
                    <div class="items">
                    </div>
                    <div class="items">
                    </div>
                    <div class="items">

                    </div>
                    <div class="items">

                    </div>
                    <div class="items">
                    </div>
                    <div class="items">
                    </div>
                    <div class="items">
                    </div>
                    <div class="items">

                    </div>
                </div>
            </div>
            <ion-icon name="chevron-forward-outline" class="button-forward"></ion-icon>
        </main>

Answer 1

该过程是正确的，但恐怕您总是将转换应用于同一个“itemContainer”元素。 这实际上应该指向与您在该迭代期间分配的按钮对相关的元素。

然后我们需要通过 querySelectorAll 获取所有轮播； 每个都有元素容器和它们的按钮作为孩子。 在这种情况下，您有一个有保证的顺序，并且只有一个数组可以滚动。

例子：

document.body.querySelectorAll(".carousels").forEach((c) => {
   const container = c.querySelector(".container")
   c.querySelector(".next")
     .addEventListener("click", 
       () => container.style...)
   c.querySelector(".back")
     .addEventListener("click",
       () => container.style...)
})

我建议您修改您的 html 代码如下：

<!-- Move this inside the carousel div -->
<ion-icon name="chevron-back-outline" class="button-back"></ion-icon>
    <!-- This is not a good tag to create many carousel divs -->
    <!-- I will use something like <div class="carousel"> -->
    <main>
        <h1>Poular Shoes</h1>
        <div class="visible_items">
            <div class="item_container">
                <div class="items">
                </div>
                <div class="items">
                </div>
                <div class="items">
                </div>
                <div class="items">
                </div>
                <div class="items">
                </div>
                <div class="items">
                </div>
                <div class="items">
                </div>
                <div class="items">
                </div>
            </div>
        </div>
        <ion-icon name="chevron-forward-outline" class="button-forward"></ion-icon>
    </main>

我会给你一个片段作为开始：

 // get all carousels in the page const carousels = document.body.querySelectorAll(".carousel"); // scan each carousel and assign events to children carousels.forEach((carousel) => { // get item_container const itemContainer = carousel.querySelector(".item_container"); // assign event to button-back carousel.querySelector(".button-back").addEventListener('click', () => { itemContainer.style.transform = 'translateX(-40%)'; }); // assign event to button-forward carousel.querySelector(".button-forward").addEventListener('click', () => { itemContainer.style.transform = 'translateX(10%)'; }); });

 <!-- Changed --> <div class="carousel"> <!-- Moved --> <ion-icon name="chevron-back-outline" class="button-back"></ion-icon> <h1>Poular Shoes</h1> <div class="visible_items"> <div class="item_container"> <div class="items"> </div> <div class="items"> </div> <div class="items"> </div> <div class="items"> </div> <div class="items"> </div> <div class="items"> </div> <div class="items"> </div> <div class="items"> </div> </div> </div> <ion-icon name="chevron-forward-outline" class="button-forward"></ion-icon> <!-- Changed --> </div>