如何检查 HTML 集合中的重复项？

Question

第一次请温柔，我才刚开始学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>

我将键绑定保存到 HTML 集合中，并且在文档上设置了一个事件侦听器，当在“键绑定”class 上触发事件“输入”时执行 function。我无法正确获取 function检查重复条目，因为我不希望为多个项目设置相同的键绑定。 使用标准 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 可以更简单地完成此操作，我也有兴趣看到它。

Answer 1

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

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