时间戳

首页 > 解决方案 > 在 forEach() 循环中单击特定按钮时触发事件

javascript - 在 forEach() 循环中单击特定按钮时触发事件

问题描述

我目前正在尝试在两个不同的按钮上设置两个不同的事件，但是，这些按钮（h1's）在一个forEach()循环中。长话短说，它是这样的：当点击一个按钮时，文本会出现在它的下面，如果再次点击就会消失（到目前为止这工作得很好）。现在，我决定添加一个带有动画的 svg，但为此我需要针对特定​​按钮，因为我需要根据单击的按钮应用不同的 CSS。

我似乎不知道如何为一个按钮设置事件，因为我创建了一个forEach()循环，从 HTML 模板中调用按钮和相应的文本。

有没有人可以通过查看这些简短的代码片段来帮助我找到一种方法来整合我在点击 svg/动画方面所缺少的内容？

注意：下面的 JS 代码片段当前正在触发我想为两个按钮上的按钮 1 <h1 class="tourTitle>设置的动画。

<section id="tours">
    <h1 class="whatWeOffer">What we offer</h1>

    <template class="tourTemplate">
        <div id="singleTourArea">
            <h1 class="tourTitle"></h1>
            <p class="tourText"></p>
        </div>
    </template>
    <div id="tourArea"></div>
        <svg id="boatSvg" class="show" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2110 1350">
            <path d="M907.8.2c-31.9 80.3-71.4 157.6-117.9 230.4-29 45.5-61.7 91.7-67.7 145.3-11.9 106 83.4 200.2 78.1 306.7-12 18.7-42.3 11.3-57.6-4.8-15.3-16.1-24.1-38.3-42.1-51.3 22.5 14.2 53.5-8.1 58.2-34.2s-7.8-51.9-19.9-75.6c65.1 70.8 102 166.7 101.3 262.8-93.4-57-165.9-147.4-201.2-251 30.8 89.3 88.2 169.3 162.9 227 63 48.6 141.2 85.5 176.3 156.9 19.2 39.2 23.1 85.2 46.7 122 11.2 17.4 26.2 31.8 41.3 45.8 38.1 35.4 77.4 69.5 117.9 102.1 21.8 17.6 43.9 34.7 66 51.9 49.7 38.6 99.5 77.1 149.2 115.7" fill="none" stroke="#000" stroke-miterlimit="10"/>
        </svg>
</section>

function showTours(tours) {
    // 1. template clone
    const tourTemplate = document.querySelector(".tourTemplate").content;
    const tourArea = document.querySelector("#tourArea");
    
    tours.forEach((oneTour) => {
        const tourCopy = tourTemplate.cloneNode(true);

        tourCopy.querySelector(".tourTitle").textContent = oneTour.title.rendered;
        const tourText = tourCopy.querySelector(".tourText");
        tourText.textContent = oneTour.description;
        //Expand single tour
        tourCopy.querySelector(".tourTitle").addEventListener("click", function(){
            if (tourText.style.display === "block") {
                tourText.style.display = "none";

                document.querySelector("#boatSvg").classList.add("show");
                document.querySelector("#singleTripArea:nth-of-type(5n)").classList.remove("flashAnimation"); 
                document.querySelector("#singleTripArea:nth-of-type(3n)").classList.remove("flashAnimation"); 
                } else {
                tourText.style.display = "block";

                document.querySelector("#boatSvg").classList.remove("show");
                document.querySelector("#boatSvg").classList.add("boatAnimation"); 
                document.querySelector("#singleTripArea:nth-of-type(5n)").classList.add("flashAnimation"); 
                document.querySelector("#singleTripArea:nth-of-type(3n)").classList.add("flashAnimation"); 
                }
        })
        tourArea.appendChild(tourCopy);
    })
}

标签： javascriptloopsanimationsvgforeach

解决方案

如果我理解正确，您想将不同的事件添加到不同的元素，并将它们附加到一个forEach循环中。也许尝试这样的事情（基本示例）：

function event1 () {
  console.log('This is the first button');
}

function event2 () {
  console.log('This is the second button');
}

var events = [event1, event2];

tours.forEach((oneTour, i) => {
  // Do some stuff
  someElement.addEventListener('click', events[i]);
}

我基本上只是在循环之外定义事件处理程序，将它们存储在一个列表中，并获取forEach值旁边的索引。然后我使用索引来访问正确的功能。我希望这会有所帮助。（或者也许我不太明白）。

推荐阅读