如何使用 JavaScript getElementByClass 而不是 GetElementById? [英] How to getElementByClass instead of GetElementById with JavaScript?
问题描述
我正在尝试根据每个 DIV 的类别切换网站上某些 DIV 元素的可见性.我正在使用一个基本的 JavaScript 片段来切换它们.问题是该脚本仅使用 getElementById，因为 JavaScript 不支持 getElementByClass.不幸的是，我必须使用 class 而不是 id 来命名 DIV，因为 DIV 名称是由我的 XSLT 样式表使用某些类别名称动态生成的.
I'm trying to toggle the visibility of certain DIV elements on a website depending on the class of each DIV. I'm using a basic JavaScript snippet to toggle them. The problem is that the script only uses getElementById, as getElementByClass is not supported in JavaScript. And unfortunately I do have to use class and not id to name the DIVs because the DIV names are dynamically generated by my XSLT stylesheet using certain category names.
我知道某些浏览器现在支持 getElementByClass，但由于 Internet Explorer 不支持，我不想走那条路.
I know that certain browsers now support getElementByClass, but since Internet Explorer doesn't I don't want to go that route.
我发现脚本使用函数按类获取元素(例如本页的#8:http://www.dustindiaz.com/top-ten-javascript/)，但我不知道如何将它们与我的切换脚本集成.
I've found scripts using functions to get elements by class (such as #8 on this page: http://www.dustindiaz.com/top-ten-javascript/), but I can't figure out how to integrate them with with my toggle script.
这是 HTML 代码.缺少 DIV 本身，因为它们是在使用 XML/XSLT 的页面加载时生成的.
Here's the HTML code. The DIVs themselves are missing since they are generated on page load with XML/XSLT.
主要问题:如何获取以下 Toggle 脚本以按类获取元素而不是按 ID 获取元素?
Main Question: How do I get the below Toggle script to get Element by Class instead of get Element by 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>
推荐答案
现代浏览器支持 document.getElementsByClassName.您可以在 caniuse 上查看提供此功能的供应商的完整分类.如果您希望将支持扩展到旧浏览器，您可能需要考虑使用 jQuery 或 polyfill 中的选择器引擎.
Modern browsers have support for document.getElementsByClassName. You can see the full breakdown of which vendors provide this functionality at caniuse. If you're looking to extend support into older browsers, you may want to consider a selector engine like that found in jQuery or a polyfill.
您需要检查 jQuery，它将允许以下内容:
You'll want to check into jQuery, which will allow the following:
$(".classname").hide(); // hides everything with class 'classname'
Google 提供托管的 jQuery 源文件，因此您可以参考它并立即开始运行.在您的页面中包含以下内容:
Google offers a hosted jQuery source-file, so you can reference it and be up-and-running in moments. Include the following in your page:
<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>
这篇关于如何使用 JavaScript getElementByClass 而不是 GetElementById?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
