如何getElementByClass而不是GetElementById与Javascript？ [英] How to getElementByClass instead of GetElementById with Javascript?
问题描述
我想根据每个DIV的类别切换网站上某些DIV元素的公开程度。我使用一个基本的JavaScript代码片段来切换它们。问题是脚本只使用getElementById，因为Javascript不支持getElementByClass。不幸的是，我必须使用类而不是id来命名DIV，因为DIV名称是由我的XSLT样式表使用某些类别名称动态生成的。
我知道某些浏览器现在支持getElementByClass，但是因为Internet Explorer不是我不想去的路线。
我发现脚本使用函数来获取元素的类例如此页面上的＃8： http://www.dustindiaz.com/top-ten -javascript / ），但我不知道如何将它们与我的切换脚本集成。
这里是html代码。 DIV本身缺失，因为它们是在使用XML / XSLT加载页面时生成的。非常感谢。
主要问题：如何获取下面的Toggle脚本来获取Element by Class而不是通过ID获取元素？
< html>
< head>
<！ - 这是TOGGLE脚本 - >
< 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>
<！ - XML / XSLT页面内容将被加载到这里，DIV被命名为类分离几十个li - >
< a href =＃onclick =toggle_visibility（'class1'）;>点击此处可切换第1类对象的公开程度< / a>
< a href =＃onclick =toggle_visibility（'class2'）;>点击此处切换第2类对象的公开程度< / a>
< / body>
< / html>现在的浏览器支持。 document.getElementsByClassName 。您可以在 caniuse 上查看哪些供应商提供此功能的详细信息。如果你想将支持扩展到旧的浏览器，你可能需要考虑一个像jQuery或polyfill中的选择器引擎。
老回答
您需要登录 jQuery ，这将允许
$（。classname）。 //隐藏类'classname'的所有内容
Google提供了托管的jQuery源文件，参考它，并在一段时间内上下运行。在您的网页中加入以下内容：
< script type =text / javascriptsrc =http：// ajax。 googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js\"> ;</script>
< script type =text / javascript>
$（function（）{
$（。classname）。hide（）;
}）;
< / script>
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.
I know that certain browsers now support getElementByClass, but since Internet Explorer doesn't I don't want to go that route.
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.
Here's the html code. The DIVs themselves are missing since they are generated on page load with XML/XSLT. Thanks so much in advance.
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>
解决方案 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.
Older Answer
You'll want to check into jQuery, which will allow the following:
$(".classname").hide(); // hides everything with class 'classname'
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>
这篇关于如何getElementByClass而不是GetElementById与Javascript？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
