使用Javascript显示/隐藏表行-可以使用ID-如何使用类？
我有一张表，上面列出了吉他店的商品——每行包含一件商品。每行（和每件商品）要么是新的，要么是旧的，要么是寄售的。我希望用户能够单击侧边栏UL中的链接（单击New、Used或Cons），并且只有相应条件的表行保持可见。因此，如果用户单击“已使用”，则所有新行和Cons行都将隐藏 我已经用一些简单的JavaScript实现了这一点，但是它使用了使用Javascript显示/隐藏表行-可以使用ID-如何使用类？,javascript,html-table,Javascript,Html Table,我有一张表，上面列出了吉他店的商品——每行包含一件商品。每行（和每件商品）要么是新的，要么是旧的，要么是寄售的。我希望用户能够单击侧边栏UL中的链接（单击New、Used或Cons），并且只有相应条件的表行保持可见。因此，如果用户单击“已使用”，则所有新行和Cons行都将隐藏 我已经用一些简单的JavaScript实现了这一点，但是它使用了getElementByID，这对我来说不起作用，因为我需要用类来标识TRs。这就是我被难倒的地方。我不知道如何在课堂上做到这一点 以下是我迄今为止所制定的解
getElementByID<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>
函数已使用（）{
document.getElementById（“新”）.style.display='none'；
document.getElementById（“cons”）.style.display='none'；
document.getElementById（“已使用”）.style.display=''；
}
函数news（）{
document.getElementByClass（“新”）.style.display=''；
document.getElementById（“cons”）.style.display='none'；
document.getElementById（“used”）.style.display='none'；
}
函数cons（）{
document.getElementByClass（“新”）.style.display='none'；
document.getElementById（“cons”）.style.display=''；
document.getElementById（“used”）.style.display='none'；
}
已使用
新的
缺点
使用
新的
欺骗
<!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>
沙箱
二手货
用过。
新项目
新的
缺点
欺骗
$（函数（）
{
$（'ul.side-nav a'）。单击（函数（）
{
$（'tr.cond'）.hide（）；
$（'tr.+$（this.attr（'class'））.show（）；
});
});
节点列表，而不是一个元素，我建议使用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';
}
}
按类切换函数（cls，on）{
var lst=document.getElementsByClassName（cls）；
对于（变量i=0；i
您可以更改整个表的类并在CSS中使用级联：JQuery 10.1.2有一个很好的显示和隐藏函数，它封装了您正在讨论的行为。这将节省您编写新函数或跟踪css类的时间
$("new").show();
$("new").hide();
我强烈建议使用jQuery而不是纯Javascript，不过请查看我的答案，了解纯Javascript解决方案。我完全同意jQuery！实际上，我可能已经找到了使用jquery的解决方案——现在看看它。我仍然不知道以后我将如何动态地实现这一点，但我想一步一步地实现。您这样做似乎很好，动态是什么意思？像ajax？我正在将其构建到wordpress站点中——我发现的新方法在沙盒文件中有效，但在wordpress中不起作用。我不知道为什么-我想知道你是否有想法？这里是链接：无需担心！通过移动一些类来实现它。工作令人惊叹的。谢谢你的帮助！“document.getElementByClass”不适用于我（Safari 10.1.1），也不出现在Flanagan（O'Reilly JavaScript 6e）中。我建议将其更改为“document.getElementsByClassName”，它在Flanagan中运行。