使用 getElementByClass 隐藏多个元素的替代方法是什么？

发布于 2024-12-03 03:18:20 字数 783 浏览 1 评论 0原文

我有一个页面，其中有一些链接，我希望能够使用两个按钮进行切换。它使用 getElementById 与一个链接配合使用，但我需要切换其中的几组。我从这个开始，但没有成功。我听说 getElementByClass 适用于除 IE 之外的所有浏览器，但我使用的是 Opera 11.5，但它仍然无法工作。我做了一些搜索，但我对 javascript 有点陌生，并且不理解大部分解释。有人可以帮助我提供一个简单的替代方案，或者帮助我解决我遇到的问题吗？这是我正在使用的测试页。

<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>

原文

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

滥情哥ㄟ 2024-12-10 03:18:20

您需要修复代码以使用正确的函数名称并将该函数的返回结果作为数组进行处理。它应该可以正常工作，除非在没有 getElementsByClassName 的非常旧的浏览器中（这是 IE9 之前的所有 IE 版本）。可以使用一些替代品，虽然效率不高，但可以通过过滤文档中的所有标签来工作。

如果您只需要单个元素，请使用 document.getElementById("idvalue") 并对 id 而不是类名进行操作。即使在旧浏览器中，getElementById 也得到广泛支持。

以下是您的代码如何使用类名工作：

<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>

标记是 display: block，而不是 display: inline。

对于较旧的浏览器，最好的办法是使用预先构建的选择器引擎，它将为您解决所有跨浏览器问题。我使用过 YUI、jQuery 和 Sizzle（Sizzle 是 YUI 和 jQuery 内部的选择器引擎）。一切都是免费的而且非常好。

如果您必须保留本机 JavaScript，您也可以获取一些代码来实现您自己的 getElementsByClassName。以下是一些来源： http://ejohn.org/blog/getelementsbyclassname-speed-comparison/< /a> 和 http://robertnyman.com/2008/05/27/the-ultimate-getelementsbyclassname-anno-2008/。

为了向您展示 jQuery 这一切是多么简单，下面是完整的代码： http://jsfiddle.net/ jfriend00/qP3XZ/。

HTML 是这样的：

<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" />

代码是这样的：

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

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

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();
    });
});

回复收藏 0 原文

[浮城] 2024-12-10 03:18:20

它将返回一个项目数组，然后您需要对其进行迭代，所以我怀疑您的代码是否可以工作。但是您可能想看看 jQuery，它极大地简化了此类代码

回复收藏 0 原文

陌生 2024-12-10 03:18:20

您可以使用 jQuery 并选择具有相同类的所有元素：

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

或相同的元素：

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

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...
});

回复收藏 0 原文

~没有更多了~

关于作者

蹲墙角沉默

暂无简介

0 文章

0 评论

23 人气

关注发私信

友情链接

文江博客

使用 getElementByClass 隐藏多个元素的替代方法是什么？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

束缚ｍ

alipaysp_VP2a8Q4rgx

α

一口甜

厌味

转身泪倾城

友情链接

使用 getElementByClass 隐藏多个元素的替代方法是什么？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

束缚ｍ

alipaysp_VP2a8Q4rgx

α

一口甜

厌味

转身泪倾城

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。