3

我有一个 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"？

4

3 回答 3

5

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

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 库。它使很多这些东西变得非常简单，对非常旧的浏览器有很好的支持，并在数十万个网站上使用。

于 2012-07-26T07:21:26.127 回答
4 
document.getElementsByClassName

将使用类名返回所有 HTML 元素的数组。迭代结果，你就设置好了。除 IE <= 8, FF < 3 外的所有浏览器均受支持。与 document.querySelectorAll 一样工作（在 IE >= 7, FF >=3.5 中工作）

有关兼容性图表，请参阅：http: //quirksmode.org/dom/w3c_core.html#gettingelements 。

于 2012-07-26T07:17:30.113 回答
1

你可以试试：

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

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

var elems = $('.myClass');

于 2012-07-26T07:19:53.520 回答