获取单击元素Vanilla JS的ID
获取单击元素Vanilla JS的ID
提问于 2018-05-08 08:32:04
我有7个<li>元素，当我单击某人时，我想记录ID的名称，这是有效的，但只对第一个元素有效，并且总是提醒tab-1，当单击tab-5时它不工作，嗯，有什么问题
HTML
<div class="tabs is-fullwidth">
<!-- Tabs navigation menu -->
<ul>
<li id="tab-1" class="tabs-heading is-active">
Tab 1
</li>
<li id="tab-2" class="tabs-heading">
Tab 2
</li>
<li id="tab-3" class="tabs-heading">
Tab 3
</li>
<li id="tab-4" class="tabs-heading">
Tab 4
</li>
<li id="tab-5" class="tabs-heading">
Tab 5
</li>
<li id="tab-6" class="tabs-heading">
Tab 6
</li>
<li id="tab-7" class="tabs-heading">
Tab 7
</li>
</ul>
</div>JS
document.querySelector('.tabs-heading').addEventListener('click', function() {
alert(this.id);
});回答 3
Stack Overflow用户
回答已采纳
发布于 2018-05-08 08:34:17
querySelector()只选择第一个匹配的元素。您必须使用querySelectorAll()选择所有元素。然后使用forEach()逐个添加事件(click)。
工作代码示例：
document.querySelectorAll('.tabs-heading').forEach(function(el){
el.addEventListener('click', function() {
alert(this.id);
});
});<div class="tabs is-fullwidth">
<!-- Tabs navigation menu -->
<ul>
<li id="tab-1" class="tabs-heading is-active">
Tab 1
</li>
<li id="tab-2" class="tabs-heading">
Tab 2
</li>
<li id="tab-3" class="tabs-heading">
Tab 3
</li>
<li id="tab-4" class="tabs-heading">
Tab 4
</li>
<li id="tab-5" class="tabs-heading">
Tab 5
</li>
<li id="tab-6" class="tabs-heading">
Tab 6
</li>
<li id="tab-7" class="tabs-heading">
Tab 7
</li>
</ul>
</div>
Stack Overflow用户
发布于 2018-05-08 08:34:44
document.querySelector只返回第一个匹配元素。
您需要使用document.querySelectorAll，并通过遍历获取的集合来绑定事件侦听器。
document.querySelectorAll('.tabs-heading')
.forEach(item => {
item.addEventListener('click', function() {
alert(this.id);
})
});<div class="tabs is-fullwidth">
<!-- Tabs navigation menu -->
<ul>
<li id="tab-1" class="tabs-heading is-active">
Tab 1
</li>
<li id="tab-2" class="tabs-heading">
Tab 2
</li>
<li id="tab-3" class="tabs-heading">
Tab 3
</li>
<li id="tab-4" class="tabs-heading">
Tab 4
</li>
<li id="tab-5" class="tabs-heading">
Tab 5
</li>
<li id="tab-6" class="tabs-heading">
Tab 6
</li>
<li id="tab-7" class="tabs-heading">
Tab 7
</li>
</ul>
</div>
Stack Overflow用户
发布于 2018-05-08 08:38:09
document.querySelector只选择匹配查询的第一个元素。您必须使用querySelectorAll并在所有元素上注册侦听器，或者使用事件委托在ul (或其他父)级别处理它。
使用querySelectorAll**:**的
document.querySelectorAll('.tabs-heading').forEach(function(li) {
li.addEventListener('click', function() {
alert(this.id);
});
});<div class="tabs is-fullwidth">
<!-- Tabs navigation menu -->
<ul>
<li id="tab-1" class="tabs-heading is-active">
Tab 1
</li>
<li id="tab-2" class="tabs-heading">
Tab 2
</li>
<li id="tab-3" class="tabs-heading">
Tab 3
</li>
<li id="tab-4" class="tabs-heading">
Tab 4
</li>
<li id="tab-5" class="tabs-heading">
Tab 5
</li>
<li id="tab-6" class="tabs-heading">
Tab 6
</li>
<li id="tab-7" class="tabs-heading">
Tab 7
</li>
</ul>
</div>
使用事件委托的
document.querySelector('div.tabs ul').addEventListener('click', function(e) {
var target = e.target;
if (target.className.indexOf('tabs-heading') > -1) {
alert(target.id);
}
});<div class="tabs is-fullwidth">
<!-- Tabs navigation menu -->
<ul>
<li id="tab-1" class="tabs-heading is-active">
Tab 1
</li>
<li id="tab-2" class="tabs-heading">
Tab 2
</li>
<li id="tab-3" class="tabs-heading">
Tab 3
</li>
<li id="tab-4" class="tabs-heading">
Tab 4
</li>
<li id="tab-5" class="tabs-heading">
Tab 5
</li>
<li id="tab-6" class="tabs-heading">
Tab 6
</li>
<li id="tab-7" class="tabs-heading">
Tab 7
</li>
</ul>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50229293
复制相关文章
相似问题
腾讯云开发者
