Javascript 防止click事件向数组中添加重复项，如JS所示

我有一套4个项目和一个按钮。单击某个项应将该项添加到空数组中。然后单击按钮将显示所选项目的数量

我遍历了HTML集合，并使用push方法在单击每个项目时添加它们。但是，每次额外的单击都会将原始项的副本添加到数组中。因此，数组长度的总和不是4，而是10

以下是控制台中每次单击的示例：

["item 2"]
["item 2", "item 2", "item 3"]
["item 2", "item 2", "item 3", "item 2", "item 3", "item 4"]
["item 2", "item 2", "item 3", "item 2", "item 3", "item 4", "item 1", "item 2", "item 3", "item 4"]

我认为这个问题与事件冒泡有关，但我不确定如何进行

这是我的建议

const noticeMod=document.getElementById（'notice'）；
const noticeInner=document.getElementById（'message'）；
const windowOverlay=document.getElementById（'overlay'）；
让itemsSelected=[]；
函数appendMessage（）{
设elSpan=document.createElement（'span'）；
elSpan.textContent=`您下载了${itemsSelected.length}项。`；
附录儿童通告（埃尔斯潘）；
}
函数removeMessage（）{
让emptySpan=document.querySelectorAll（“#message span”）；
清空span[0]。删除（）；
}
函数openNotification（）{
noticeMod.classList.add（'show-notice'）；
windowOverlay.classList.add（'show-overlay'）；
}
函数closeNotification（）{
noticeMod.classList.remove（'show-notice'）；
windowOverlay.classList.remove（'show-overlay'）；
}
函数addItems（）{
const currentItem=document.getElementsByCassName（'item'）；
对于（i=0；i
正文{
背景：#191919；
颜色：#fff；
位置：相对位置；
}
.注意{
背景：#2424；
边框：1px实心#555；
位置：固定；
右：0；
顶部：12px；
转化：translateX（100%）；
过渡时间：500ms；
z指数：1000；
}
.出示告示{
右：12px；
转化：translateX（0%）；
过渡时间：500ms；
}
.近距离{
光标：指针；
左边框：2px实心#555；
左侧填充：12px；
左边距：12px；
}
.透明覆盖层{
位置：固定；
显示：无；
排名：0；
左：0；
右：0；
底部：0；
光标：指针；
背景色：#191919；
不透明度：0；
z指数：990；
}
.显示覆盖图{
显示：块；
}
.行{
显示器：flex；
弯曲方向：行；
证明内容：之间的空间；
柔性包装：包装；
填充：12px；
}
.项目{
光标：指针；
背景：#2424；
填充：20px；
边框：3倍实心#2424；
边缘底部：12px；
}
.所选项目{
边框：3px实心#2269a8；
}
.项目名称{
字号：18px；
}
.cta{
保证金：0自动；
填充：12px；
}
#提交{
光标：指针；
边界：无；
背景#2269a8；
填充：12px；
颜色：#fff；
宽度：100%；
}
#提交：悬停{
背景#235596；
}

✕
项目1
项目2
项目3
项目4
提交
问题在于您的
附加项方法。如何识别当前单击的项目？每次调用addItems方法时，它都会找到所有选择了类名
item
的项。因此，在第一次单击时，只选择了一个项目。但每次单击后，您将获得以前单击的所有项目。现在有两条路

如果您确定项目名称是唯一的，那么在addItems方法中，您可以检查重复的项目并仅添加新的项目

function addItems() {
    const currentItem = document.getElementsByClassName('item');

    for(i = 0; i < currentItem.length; i++) {
        let itemName = document.querySelectorAll('.item-title')[i].textContent;
        if (currentItem[i].classList.contains('item-selected') && itemsSelected.indexOf(itemName) === -1) {
             itemsSelected.push(itemName);
        }  

     }

     console.log(itemsSelected);

}


然后像这样调用addItems方法

addItems(event.target);

我希望这个例子能对你有所帮助。
在本例中，值​​第一次单击时添加，第二次单击时删除


let数组=[]
document.querySelector（“.container”）.addEventListener（'click'，（e）=>{
if（e.target.classList.contains（'item'））{
e、 target.classList.toggle（'active'）
const index=array.indexOf（e.target.textContent）
如果（索引！=-1）{
数组=数组.过滤器（（e，i）=>i！==索引）
}否则{
array.push（例如target.textContent）
}
console.log（数组）
}
})
.item{
背景颜色：浅绿色；
宽度：100px；
高度：100px；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
边框：2个点绿色；
}
.项目：悬停{
光标：指针；
}
.item.active{
边框样式：实心；
}
.集装箱{
宽度：70%；
保证金：0自动；
显示器：flex；
证明内容：之间的空间；
}

项目1
项目2
项目3
项目4
请发布a-此处有太多不相关的代码，为什么不直接获取
const itemsSelected=document.querySelectorAll（'.item selected'）注意@mplungjan我没有意识到链接小提琴会在帖子中添加所有的代码，我不会-我这样做是为了让其他人不必离开，所以可以看到你的代码谢谢@sabbir.alam这是很好的解释和工作完美，因此也真的很有帮助@基里尔：我可以使用过滤方法清除阵列
addItems(event.target);