时间戳

首页 > 解决方案 > 如何使用带有香草 Javascript 的部分 ID 捕获对元素的点击？

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

问题描述

我想在单击一系列元素中的一个时运行一个函数，并希望使用部分 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>

JS：

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

我尝试将 querySelector 更改为包含 'a[id^="selector-"]'，但只有第一个元素想要在点击时响应。

标签： javascript

解决方案

将*=选择器与idas 属性和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>

推荐阅读