Question

我有一个页面，其中包含一些我希望能够使用两个按钮切换的链接。它使用一个链接，使用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>

Answer 1

它会返回一个你需要迭代的项目数组，所以我怀疑你的代码是否有效。但你可能想看看jQuery，它可以显着简化这种代码

Answer 2

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

如果您只想要一个元素，那么使用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>

P.S。 <p>标记为display：block，not display：inline。

对于旧版浏览器，最好的办法是使用预先构建的选择器引擎来解决所有跨浏览器问题。我使用过YUI，jQuery和Sizzle（Sizzle是YUI和jQuery中的选择器引擎）。一切都是免费的，非常好。

如果你必须保留本机javascript，你也可以为你自己的getElementsByClassName实现获得一些代码。以下是一些来源：http://ejohn.org/blog/getelementsbyclassname-speed-comparison/和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();
    });
});

Answer 3

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

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

或相同的元素：

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

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

3 个答案: