如何使用带有香草Javascript的部分ID捕获对元素的单击？

Question

我希望在单击一系列元素中的某个元素时运行函数，并希望使用部分ID来锁定这些元素。目前，只有第一个元素在单击时才会响应。我做错了什么？我的代码：

HTML：

<div>
    <a id="selector-0">Zero</a>
</div>
<div>
    <a id="selector-1">One</a>
</div>
<div>
    <a id="selector-2">Two</a>
</div> 

联署材料：

document.querySelector('[id^="selector-"]').onclick = function(){
    var id_selector = this.getAttribute('id');
    alert('ID: ' + id_selector);
}

我试图将querySelector更改为包含‘aid^=’选择器-‘，但是只有第一个元素希望在单击时作出响应。

Answer 1

使用*=选择器，其中id为属性，document.querySelectorAll为document.querySelectorAll。

然后将onclick添加到给定的检索元素数组的所有元素中。

​

const els = Array.from(document.querySelectorAll('[id*=selector-]'));
console.log(els.length);
els.forEach(el => el.onclick = () => console.log('Clicked el:', el));  

<div>
    <a id="selector-0">Zero</a>
</div>
<div>
    <a id="selector-1">One</a>
</div>
<div>
    <a id="selector-2">Two</a>
</div> 

​