What is an alternative to using getElementByClass for hiding multiple elements?

问题

I have a page that has a few links that I would like to be able to toggle with two buttons. It works with one link, using getElementById, but I need to toggle a few groups of them. I started with this, but it failed to work. I heard that getElementByClass worked with everything but IE, but I'm using Opera 11.5 and it still wont work. I've done a little searching, but I'm somewhat new to javascript and don't understand most of the explanations. Can someone help me with a simple alternative, or help me fix a problem I've made? This is a test page that I was using.

<head>
<script type="text/javascript">
function hideNames()
{
document.getElementByClass("webname").style.display="none";
}
function showNames()
{
document.getElementByClass("webname").style.display="inline";
}
</script>
</head>
<body>
<p class="webname">Webname</p>
<p class="webname">test</p>
<input type="button" onclick="hideNames()" value="Hide Web Names" />
<input type="button" onclick="showNames()" value="Show Web Names" />
</body>

回答1:

You need to fix your code to use the proper function name and to process the return result from that function as an array. It should work fine except in very old browsers that don't have getElementsByClassName (which is all versions of IE until IE9). There are substitutes that can be used instead that aren't as efficient, but work by filtering through all tags in the document.

If you only want a single element, then use document.getElementById("idvalue") and operate on an id instead of a class name. getElementById is widely supported even in old browsers.

Here's how your code could work using class names:

<head>
<script type="text/javascript">
function hideNames()
{
    var list = document.getElementsByClassName("webname");
    for (var i = 0; i < list.length; i++) {
        list[i].style.display="none";
    }
}

function showNames()
{
    var list = document.getElementsByClassName("webname");
    for (var i = 0; i < list.length; i++) {
        list[i].style.display="block";
    }
}

</script>
</head>
<body>
<p class="webname">Webname</p>
<p class="webname">test</p>
<input type="button" onclick="hideNames()" value="Hide Web Names" />
<input type="button" onclick="showNames()" value="Show Web Names" />
</body>

P.S. <p> tags are display: block, not display: inline.

For older browsers, the best thing to do is to use a pre-built selector engine that will solve all cross-browser issues for you. I've used YUI, jQuery and Sizzle (Sizzle is the selector engine inside YUI and jQuery). All are free and very good.

You can also just get some code for your own implementation of getElementsByClassName if you have to stay native javascript. Here are some sources: http://ejohn.org/blog/getelementsbyclassname-speed-comparison/ and http://robertnyman.com/2008/05/27/the-ultimate-getelementsbyclassname-anno-2008/.

To show you how simple all this is with jQuery, here's the entire code for that: http://jsfiddle.net/jfriend00/qP3XZ/.

The HTML is this:

<p class="webname">Webname</p>
<p class="webname">test</p>
<input id="hide" type="button" value="Hide Web Names" />
<input id="show" type="button" value="Show Web Names" />

The code is this:

$(document).ready(function() {
    $("#hide").click(function() {
        $(".webname").hide();
    });

    $("#show").click(function() {
        $(".webname").show();
    });
});

回答2:

And it will return an array of items which you'll then need to iterate over, so I doubt your code will work. But you might want to take a look ay jQuery which simplifies this kind of code dramatically

回答3:

You could use jQuery and select all elements with the same class:

$('.myclass').onclick(function() {
    ...some instruction...
});

Or the same element:

$('button').onclick(function() {
    ...some instruction...
});

来源：https://stackoverflow.com/questions/7279654/what-is-an-alternative-to-using-getelementbyclass-for-hiding-multiple-elements

标签

javascript

getelementsbyclassname