Question

<core-menu selected="0">
    <core-item class="menu-link" icon="info" label="About us"></core-item>
    <core-item class="menu-link" icon="image:portrait" label="Professor"></core-item>
    <core-item class="menu-link" icon="social:group" label="Members"></core-item>
</core-menu>

我有一个核心菜单包含一组核心项目，我想用以下代码将click事件绑定到它们

var menulink = document.querySelector('.menu-link');
menulink.addEventListener('click', function(){
    console.log(this.label);            
});

但它只适用于第一个核心项目，如何解决这个问题？

还尝试了

var menulink = document.querySelectorAll('.menu-link');
menulink.addEventListener('click', function(){
    console.log(this.label);            
});

但是我得到了Uncaught TypeError：undefined不是函数

Answer 1

但它只适用于第一个核心项目，如何解决这个问题？

这是因为正如Peter Burns评论的那样，querySelector只返回第一个匹配元素并忽略其他元素。

还尝试了[querySelectorAll]，但我得到了Uncaught TypeError：undefined不是函数

这是因为querySelectorAll返回匹配元素的数组，而addEventListener不是附加到数组对象的方法 - 而是附加到数组中包含的每个单独元素。为了解决这个问题，我们需要遍历每个返回的元素并为每个元素分配事件监听器：

var menulinks = document.querySelectorAll('.menu-link');

for (var i = 0; i < menulinks.length; i++)
    menulinks[i].addEventListener('click', function(){
        console.log(this.label);            
    });

Polymer - 如何将事件一次绑定到一组按钮

1 个答案: