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

Question

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

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

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

注意： 下面的 JS 代码 sn-p 目前正在触发我想为按钮 1

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

Answer 1

在你的

tours.forEach((oneTour) => {
    //A bunch of stuff
});

您正在循环 tours，并且在每次迭代中，您可以将 current 元素引用为 oneTour。

所以，如果 oneTour 有一个 tourTitle 类，那么，而不是

tourCopy.querySelector(".tourTitle").addEventListener("click", function(){
    //A bunch of stuff    
});

你可以这样做：

oneTour.addEventListener("click", function(){
    //A bunch of stuff    
});

请注意，我可能没有完全理解您想要发生的事情。如果是这样的话，我会欢迎对问题进行进一步澄清。

Answer 2

如果我理解正确，您想将不同的事件添加到不同的元素，并将它们附加到 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 的索引。然后我使用索引来访问正确的功能。我希望这会有所帮助。 （或者也许我不太明白）。