Question

我有一个javascript函数MyFunc()，可以执行与id="item_for_MyFunc"相关的功能。在函数中有一个

var elem = document.getElementById("item_for_MyFunc");

和html正文：

<body onload="MyFunc()">
<p id="item_for_MyFunc">

一切正常，但我想在页面上的几个项目中使用此功能。这就是为什么我应该在页面上多次使用<p class="item_for_MyFunc">来处理这个函数，所以使用id不是解决方案。

应该对函数进行哪些更改，以便可以更改class="item_for_MyFunc"？

Answer 1

所以你在那里做的很简单。让我给你一个稍微强大的版本：

document.addEventListener('load', function(){

    var elements = document.querySelectorAll('.myClassName');
    for(var i=0, len=elements.length; i<len; i++){
        MyFunc.call( elements[i] );
    }

}, false);

IE的旧版本，6和7具体，没有querySelectorAll。我假设你并不担心他们。如果你是，还有其他方法可以做到这一点，我可以告诉你如何需要。

基本上我们为你的所有元素提供了一个'myClassName'类，而querySelectorAll找到所有元素并返回一个DOM元素数组。

然后我们遍历列表，并对每个元素执行MyFunc。

修改的因此，编写好的javascript的一个关键原则是尽可能地将js代码与html标记分开。你几乎不应该再使用像onload =“myFunc”这样的内联事件处理程序了。使用js本身编写的事件处理程序。

如果您有选项，则应使用jQuery库。它使这些东西的很多非常简单，对非常老的浏览器有很好的支持，并且在成千上万的网站上使用。

Answer 2

document.getElementsByClassName

将使用类名返回所有HTML元素的数组。迭代结果，你就完成了。除了IE＆lt; = 8，FF＆lt;所有浏览器都支持3.就像document.querySelectorAll（在IE＆gt; = 7，FF＆gt; = 3.5）中工作

参见： http://quirksmode.org/dom/w3c_core.html#gettingelements 兼容性图表。

Answer 3

你可以尝试：

var elems = document.getElementsByClassName('myClass');

之前我没有使用过那个，但你可以使用jQuery，因为它更简单;

var elems = $('.myClass');

使用javascript代码不是用于id，而是用于类

3 个答案: