我试图根据每个 DIV 的类来切换网站上某些 DIV 元素的可见性。我使用一个基本的 JavaScript 片段来切换它们。问题是该脚本仅使用getElementById, as getElementByClassJavaScript 不支持。不幸的是，我必须使用 class 而不是 id 来命名 DIV，因为 DIV 名称是由我的 XSLT 样式表使用某些类别名称动态生成的。
我知道某些浏览器现在支持getElementByClass，但由于 Internet Explorer 没有，我不想走那条路。
我发现脚本使用函数按类获取元素（例如本页上的#8：http://www.dustindiaz.com/top-ten-javascript/ http://www.dustindiaz.com/top-ten-javascript/），但我不知道如何将它们与我的切换脚本集成。
这是 HTML 代码。 DIV 本身缺失，因为它们是在使用 XML/XSLT 加载页面时生成的。
主要问题：如何让下面的切换脚本按类获取元素而不是按 ID 获取元素？
<html>
<head>
<!--This is the TOGGLE script-->
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>
</head>
<!--the XML/XSLT page contents will be loaded here, with DIVs named by Class separating dozens of li's-->
<a href="#" onclick="toggle_visibility('class1');">Click here to toggle visibility of class 1 objects</a>
<a href="#" onclick="toggle_visibility('class2');">Click here to toggle visibility of class 2 objects</a>
</body>
</html>
The getElementsByClassName最新版本的 Firefox、Safari、Chrome、IE 和 Opera 现在原生支持该方法，您可以创建一个函数来检查本机实现是否可用，否则使用 Dustin Diaz 方法：
function getElementsByClassName(node,classname) {
if (node.getElementsByClassName) { // use native implementation if available
return node.getElementsByClassName(classname);
} else {
return (function getElementsByClass(searchClass,node) {
if ( node == null )
node = document;
var classElements = [],
els = node.getElementsByTagName("*"),
elsLen = els.length,
pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"), i, j;
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
})(classname, node);
}
}
Usage:
function toggle_visibility(className) {
var elements = getElementsByClassName(document, className),
n = elements.length;
for (var i = 0; i < n; i++) {
var e = elements[i];
if(e.style.display == 'block') {
e.style.display = 'none';
} else {
e.style.display = 'block';
}
}
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
