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/

相关文章:

objective-c - 在 Cocoa Desktop 中切换 "Show/Hide"菜单项的最佳方法

css - 如何使用 CSS 切换显示/隐藏 div?

javascript - 为什么我的两个 if 语句都被激活?

javascript - 如何将这个 ruby​​ 字符串转换为普通数组?

c++ - 友元函数是继承的吗?为什么基类 FRIEND 函数会作用于派生类对象?

javascript - JavaScript 中的属性初始化

java - 我的 setNumber 没有按照我的预期发生相应变化

javascript - 展开图像同时隐藏其他 div

javascript - RiotJS : How to cache values during loops?

java - 如何在 JavaScript 中访问在 AJAX 请求中作为响应发送的自定义 Java 对象?