我目前正在尝试编写一些JavaScript,以获取已单击的类的属性。我知道以正确的方式执行此操作,应该使用事件侦听器。我的代码如下:
var classname = document.getElementsByClassName("classname");
var myFunction = function() {
var attribute = this.getAttribute("data-myattribute");
alert(attribute);
};
classname.addEventListener('click', myFunction(), false);
我期望每次单击其中一个类来告诉我该属性时,都会得到一个警告框,但是不幸的是,这不起作用。有人可以帮忙吗?
(注 - 我可以很容易地做到这一点jQuery
,但我不喜欢使用它)
这应该工作。getElementsByClassName
返回与条件匹配的元素的数组(类似于数组)(请参见编辑)。
var elements = document.getElementsByClassName("classname");
var myFunction = function() {
var attribute = this.getAttribute("data-myattribute");
alert(attribute);
};
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', myFunction, false);
}
jQuery为您完成了循环部分,您需要使用纯JavaScript来完成。
如果您有ES6支持,则可以将最后一行替换为:
Array.from(elements).forEach(function(element) {
element.addEventListener('click', myFunction);
});
注意:较旧的浏览器(如IE6,IE7,IE8)不支持getElementsByClassName
,因此会返回undefined
。
编辑:更正
getElementsByClassName
不会返回数组,而是返回大多数HTMLCollection或某些浏览器中的NodeList(Mozilla ref)。这两种类型都是Array-Like,(意味着它们具有length属性,并且可以通过其索引访问对象),但是它们并不是严格意义上的Array或从Array继承。(这意味着不能对这些类型执行在数组上可以执行的其他方法)
感谢@Nemo用户指出这一点,并让我深入了解它。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句