javascript - 如何使用 JavaScript 获取 ElementByClass 而不是 GetElementById?

标签 javascript class toggle getelementbyid getelementsbyclassname

我正在尝试根据每个 DIV 的类来切换网站上某些 DIV 元素的可见性。我正在使用基本的 JavaScript 片段来切换它们。问题在于脚本仅使用 getElementById,因为 JavaScript 不支持 getElementByClass。不幸的是,我必须使用 class 而不是 id 来命名 DIV,因为 DIV 名称是由我的 XSLT 样式表使用某些类别名称动态生成的。

我知道某些浏览器现在支持 getElementByClass,但由于 Internet Explorer 不支持,所以我不想走那条路。

我找到了使用函数按类获取元素的脚本(例如本页上的#8:http://www.dustindiaz.com/top-ten-javascript/),但我不知道如何将它们与我的切换脚本集成。

这是 HTML 代码。 DIV 本身缺失,因为它们是在使用 XML/XSLT 加载页面时生成的。

主要问题:如何让下面的 Toggle 脚本按类获取元素而不是按 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>

最佳答案

getElementsByClassName 方法现在被最新版本的 Firefox、Safari、Chrome、IE 和 Opera 本地支持,您可以创建一个函数来检查本地实现是否可用,否则使用达斯汀迪亚兹方法:

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);
  }
}

用法:

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';
     }
  }
}

关于javascript - 如何使用 JavaScript 获取 ElementByClass 而不是 GetElementById?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1933602/

相关文章:

javascript - 如何使用jquery动态生成的id来获取标签的值

c++ - 嵌套类崩溃 C++

qt - 覆盖可检查的 QGroupBox 切换行为

javascript - Chrome 上的 AJAX 错误消息,启用了 MIME 类型检查

javascript - 我的 HTML 页面上的白点

javascript - D3 JS条形图,在条形顶部显示y轴标签值

jquery - 使用 JQuery Toggle 设置和检索变量

java - 创建可在整个android项目中使用的Settings类

c++ - 在哪里定义内部结构静态对象?好像不能

jquery - 切换按钮,显示和隐藏元素,但同时移动按钮