时间戳

首页 > 解决方案 > 如何检查 HTMLcollection 中的重复项？

javascript - 如何检查 HTMLcollection 中的重复项？

问题描述

第一次，请温柔，我刚开始学习Javascript。

我正在尝试建立一个计数计数器，您可以在其中同时计数多个事物。我有一个设置面板，您可以在其中通过在文本输入中键入您喜欢的键绑定来添加或更改键绑定。我有使用 Javascript 添加或删除这些输入对的按钮，因此这些输入对的数量总是在变化。

<input class="key-binding"></input>
<input class="tallied-item"></input>

<input class="key-binding"></input>
<input class="tallied-item"></input>

<input class="key-binding"></input>
<input class="tallied-item"></input>

我将键绑定保存到 HTMLcollection，并且我在文档上设置了一个事件侦听器，当在“键绑定”类上触发事件“输入”时，该事件侦听器执行一个函数。我无法获得正确检查重复条目的功能，因为我不希望为多个项目设置相同的键绑定。使用标准 for 循环不起作用，因为当我添加或删除输入对时 HTMLcollection 会发生变化。这是我到目前为止所拥有的：

let keyBindings = document.getElementsByClassName('key-binding');
function dupKeyCheck(){
tempArray = []
Array.from(keyBindings).forEach(function(element) {
    let value  = element.value;
    if (tempArray.indexOf(element) == -1){
        tempArray.push(value)
    } else {
        //execute some code when duplicate entry is found
    }
})
}

如果这可以使用 jQuery 更简单地完成，我也会有兴趣看到它。

标签： javascriptjquery

解决方案

在事件处理程序上使用 Array.prototype.filter，您可以在其中将 event.target.value 与其他值进行比较

dupes = Array.from(keyBindings).filter((i) => i !== event.target && i.value == event.target.value).length;

推荐阅读