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

我有一个页面，有几个链接，我希望能够切换两个按钮。它使用一个链接，使用getElementById，但我需要切换它们的几组。我从这开始，但没能奏效。我听说getElementByClass可以处理除IE之外的所有内容，但我使用的是Opera 11.5，但它仍然无法工作。我已经做了一些搜索，但我对javascript有点新，并且不了解大多数解释。有人可以帮助我一个简单的选择，或帮助我解决我所做的一个问题？这是我正在使用的测试页面。什么是使用getElementByClass隐藏多个元素的替代方法？

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

来源

2011-09-02 Casey O' Riordan

（一）'getElementByClass'不存在。（b）即使你使用了正确的方法，你仍然需要迭代该方法返回的所有元素。 –

可能的重复[我们在javascript中getElementsByClassName？]（http://stackoverflow.com/questions/1818865/do-we-have-getelementsbyclassname-in-javascript） –

您需要修复代码以使用正确的函数名称并将该函数的返回结果作为数组处理。它应该可以很好地工作，除非在非常旧的浏览器中没有getElementsByClassName（这是IE浏览器的所有版本，直到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>标签显示：块，不显示：内联。

对于旧版浏览器，最好的办法是使用预先构建的选择器引擎，它将为您解决所有跨浏览器问题。我用过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-02 06:03:00 jfriend00

你的脚本工作完美。我也会研究jQuery在我的网站上使用。谢谢您的帮助。 –

我为您添加了一个jQuery示例，以便我的答案结束。 – jfriend00

而且它会返回一组需要迭代的项目，所以我怀疑你的代码会工作。但是，你可能想看看唉jQuery的简化了这种代码大幅

来源

2011-09-02 05:53:27 Doogal

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

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

或者相同的元素：

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

来源

2011-09-02 05:55:59 jbrond

我会研究jQuery。谢谢。 –

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

回答

相关问题