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

3 回答 3

1

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

于 2011-09-02T05:53:27.473 回答
1

您需要修复代码以使用正确的函数名称并将该函数的返回结果作为数组处理。它应该可以正常工作，除非在没有的非常旧的浏览器中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>

PS<p>标签是显示：块，而不是显示：内联。

对于较旧的浏览器，最好的办法是使用一个预先构建的选择器引擎，它将为您解决所有跨浏览器问题。我使用过 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();
    });
});
于 2011-09-02T06:03:00.353 回答
0

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

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

或相同的元素：

$('button').onclick(function() {
    ...some instruction...
});
于 2011-09-02T05:55:59.673 回答