在第二次单击时更改侦听器

Question

我有一个javascript代码，我在一个数组中存储一个元素，在点击一个按钮，并改变按钮从"+"产生绯闻"帮助"。在再次单击按钮时，我想从数组中删除该元素。

我有这个代码。它很好地完成了第一部分，但它也在没有第二次单击按钮的情况下删除了元素。

let favorites = []
let buttonList = document.querySelectorAll("button")
let click = 0
buttonList.forEach((button, index) => {
button.addEventListener('click', function saveFavourites() {
click++
favorites.push(products[index])
button.textContent = "-"
console.log(favorites)
if (click === 1) {
this.removeEventListener('click', saveFavourites)
}
})
button.addEventListener('click', function removeFavourites() {
click ++
let i = favorites.indexOf(products[index])
favorites.splice(i, 1)
button.textContent = "+"
console.log(favorites)
if (click === 2) {
this.removeEventListener('click', removeFavourites)
}
})
})

Answer 1

为同一个按钮元素添加了两个独立的事件侦听器。使用一个事件监听器并切换一个布尔flag变量来跟踪元素是否应该被添加或删除。

let favorites = []
let buttonList = document.querySelectorAll("button")
buttonList.forEach((button, index) => {
let isAdded = false; // flag variable to track whether the element is added or removed
button.addEventListener('click', function toggleFavourites() {
if (isAdded) {
let i = favorites.indexOf(products[index])
favorites.splice(i, 1)
button.textContent = "+"
isAdded = false;
} else {
favorites.push(products[index])
button.textContent = "-"
isAdded = true;
}
console.log(favorites)
})
})

当按钮被点击时，代码检查isAdded的值，并将元素添加到favorites数组或将其移除。

下面是演示:Codesandbox