使用Javascript显示/隐藏表行-可以使用ID -如何使用类？
我有一个表，其中列出了在吉他商店的商品-每行包含一件商品。每一行(和每件商品)要么是新的，要么是二手的，要么是寄售的。我希望用户能够单击侧边栏UL中的链接(单击New、Used或Cons)，并且只有相应条件的表行保持可见。因此，如果用户单击"Used“，则所有New和Cons行都将变为隐藏状态。
我已经用一些简单的JavaScript实现了这一点，但它使用了getElementByID，这对我不起作用，因为我需要用类来标识TR。这就是我被难住的地方。我不确定如何在类中实现这一点。
这是我到目前为止想出的解决方案：
<html>
<head>
<script>
function used() {
document.getElementById("new").style.display = 'none';
document.getElementById("cons").style.display = 'none';
document.getElementById("used").style.display = '';
}
function news() {
document.getElementByClass("new").style.display = '';
document.getElementById("cons").style.display = 'none';
document.getElementById("used").style.display = 'none';
}
function cons() {
document.getElementByClass("new").style.display = 'none';
document.getElementById("cons").style.display = '';
document.getElementById("used").style.display = 'none';
}
</script>
</head>
<body>
<span onClick="used();">Used</span><br />
<span onClick="news();">New</span><br />
<span onClick="cons();">Cons</span><br /><br />
<table border="1">
<tr id="used">
<td>Used</td>
</tr>
<tr id="new">
<td>New</td>
</tr>
<tr id="cons">
<td>Cons</td>
</tr>
</table>
</body>
</html>上面的代码运行良好，如果我能让它与类一起工作，它将解决我的迫切需求。然而，最终我想将其扩展到用于品牌--这样用户可以点击一个品牌，只看到该品牌的帖子。在这种情况下，我可能有20或30个品牌在表中，因此以上将不是理想的。此外，这最终将生活在Wordpress站点中，理想情况下，我将从wordpress中的元数据为每个品牌创建类，并类似地创建一个包含切换表格的品牌的动态UL，以及一个可以使用不断变化的变量集的js解决方案！所以我知道我上面的方法不是最好的方法，但这是我现在唯一知道的可以尝试的方法。
如果能帮上忙，我将不胜感激--在我迈向更具挑战性的品牌方面时，关于如何更有效地做到这一点的建议也将不胜感激。
编辑：
谷歌帮了我一把，我有了新的方向--这可能会解决我的问题：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
</style>
</head>
<body>
<ul class="side-nav">
<li><a class="cond" href="#">Show all</a></li>
<li><a class="used" href="#">Used</a></li>
<li><a class="new" href="#">New</a></li>
<li><a class="cons" href="#">Cons</a></li>
</ul>
<table>
<tr class="cond used">
<td>A Used Item</td>
<td>Used.</td>
</tr>
<tr class="cond new">
<td>A New Item</td>
<td>New</td>
</tr>
<tr class="cond cons">
<td>A Cons Item</td>
<td>Cons</td>
</tr>
</table>
<script>
$(function()
{
$('ul.side-nav a').click(function()
{
$('tr.cond').hide();
$('tr.' + $(this).attr('class')).show();
});
});
</script>
</body>
</html>回答 3
Stack Overflow用户
发布于 2013-07-08 09:34:10
document.getElementsByClassName返回一个NodeList，而不是单个元素，我建议您使用jQuery，因为您只需要使用类似$('.new').toggle()的内容
或者，如果您想要普通的JS，请尝试：
function toggle_by_class(cls, on) {
var lst = document.getElementsByClassName(cls);
for(var i = 0; i < lst.length; ++i) {
lst[i].style.display = on ? '' : 'none';
}
}Stack Overflow用户
发布于 2014-02-08 00:00:22
JQuery 10.1.2有一个很好的显示和隐藏函数，这些函数封装了您正在讨论的行为。这将使您不必编写新函数或跟踪css类。
$("new").show();
$("new").hide();Stack Overflow用户
发布于 2013-07-08 11:20:56
您可以更改整个表的类，并在CSS：http://jsbin.com/oyunuy/1/中使用级联
https://stackoverflow.com/questions/17518035
复制相似问题
腾讯云开发者
