我目前正在尝试编写一些JavaScript,以获取已单击的类的属性。我知道要以正确的方式执行此操作,应该使用事件侦听器。我的代码如下:
var classname = document.getElementsByClassName("classname"); var myFunction = function() { var attribute = this.getAttribute("data-myattribute"); alert(attribute); }; classname.addEventListener('click', myFunction(), false);
我希望每次单击其中一个类来告诉我该属性时,都会得到一个警告框,但是不幸的是,这不起作用。有人可以帮忙吗?
( 注 - 我可以很容易地做到这一点jQuery,但我 不 喜欢使用它)
jQuery
这应该工作。getElementsByClassName返回与条件相匹配的元素的数组(类似于 数组 )(请参阅编辑)。
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。
undefined
编辑:更正
getElementsByClassName不会返回数组,而是返回大多数HTMLCollection或某些浏览器中的NodeList(Mozilla ref)。这两种类型都是Array-Like,(意味着它们具有length属性,并且可以通过其索引访问对象),但是它们并不是严格意义上的Array或从Array继承。(这意味着不能对这些类型执行在数组上可以执行的其他方法)