Question

我正在尝试根据每个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>

Answer 1

最新版本的Firefox，Safari，Chrome，IE和Opera现在支持getElementsByClassName方法，您可以创建一个函数来检查本机实现是否可用，否则使用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);
  }
}

用法：

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

Answer 2

现代浏览器支持document.getElementsByClassName。您可以在caniuse查看哪些供应商提供此功能的完整细分。如果您希望将支持扩展到旧浏览器，您可能需要考虑使用jQuery或polyfill中的选择器引擎。

旧答案

您需要查看jQuery，这将允许以下内容：

$(".classname").hide(); // hides everything with class 'classname'

Google提供了一个托管的jQuery源文件，因此您可以引用它并立即启动并运行。在您的页面中包含以下内容：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
  $(function(){
    $(".classname").hide();
  });
</script>

Answer 3

document.getElementsByClassName('CLASSNAME')[0].style.display = 'none';

通过使用getElementsByClassName，它会返回一个包含多个类的数组。因为同一个类名可以在同一个HTML页面内的多个实例中使用。我们使用数组元素id来定位我们需要的类，在我的例子中，它是给定类名的第一个实例。所以我使用了[0]

Answer 4

添加到CMS's answer，这是toggle_visibility我用过的更通用的方法：

function toggle_visibility(className,display) {
   var elements = getElementsByClassName(document, className),
       n = elements.length;
   for (var i = 0; i < n; i++) {
     var e = elements[i];

     if(display.length > 0) {
       e.style.display = display;
     } else {
       if(e.style.display == 'block') {
         e.style.display = 'none';
       } else {
         e.style.display = 'block';
       }
     }
  }
}

Answer 5

我的解决方案：

首先创建＆＃34;＆lt; style＆gt;＆＃34;带有ID的标签。

<style id="YourID">
    .YourClass {background-color:red}
</style>

然后，我在这样的JavaScript中创建一个函数：

document.getElementById('YourID').innerHTML = '.YourClass {background-color:blue}'

对我来说就像一个魅力。

Answer 6

使用它来访问Javascript中的类。

<script type="text/javascript">
var var_name = document.getElementsByClassName("class_name")[0];
</script>

Answer 7

在类声明上附加ID

.aclass, #hashone, #hashtwo{ ...codes... }
document.getElementById( "hashone" ).style.visibility = "hidden";

如何使用JavaScript getElementByClass而不是GetElementById？

7 个答案:

旧答案