我试图根据每个DIV的类别切换网站上某些DIV元素的可见性。我正在使用基本的JavaScript代码片段进行切换。问题在于该脚本仅使用getElementById,而getElementByClassJavaScript不支持。不幸的是,我必须使用class而不是id来命名DIV,因为DIV名称是由我的XSLT样式表使用某些类别名称动态生成的。
getElementById
getElementByClass
我知道某些浏览器现在支持getElementByClass,但是由于Internet Explorer不支持,所以我不想走这条路。
我发现脚本使用函数来按类获取元素(例如此页面上的#8:),但是我不知道如何集成它们与我的切换脚本一起使用。
这是HTML代码。DIV本身缺失,因为它们是在XML / XSLT页面加载时生成的。
主要问题:如何获取下面的Toggle脚本以按类获取Element而不是按ID获取Element?
<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>
现代浏览器支持document.getElementsByClassName。您可以在caniuse上看到哪些供应商提供此功能的完整详细信息。如果您希望将支持扩展到较旧的浏览器中,则可能需要考虑使用选择器引擎,例如jQuery或polyfill。
document.getElementsByClassName
您将需要签入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>