11

我有一张表，其中列出了吉他商店中的商品 - 每行包含一件商品。每行（和每件商品）要么是新的、二手的，要么是寄售的。我希望用户能够单击侧边栏 UL 中的链接（单击 New、Used 或 Cons），并且只有相应条件的表行保持可见。因此，如果用户单击“Used”，则所有 New 和 Cons 行都将被隐藏。

我已经使用一些简单的 JavaScript 完成了这项工作，但它使用getElementByIDwhich 对我不起作用，因为我需要用类识别 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>
4

3 回答 3

20

document.getElementsByClassName返回 a 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';
    }
}
于 2013-07-08T01:34:10.440 回答
7

JQuery 10.1.2 有一个很好的显示和隐藏函数来封装你正在谈论的行为。这将使您不必编写新函数或跟踪 css 类。

$("new").show();

$("new").hide();

w3cSchool 链接到 JQuery 显示和隐藏

于 2014-02-07T16:00:22.473 回答
2

您可以更改整个表的类并使用CSS中的级联：http: //jsbin.com/oyunuy/1/

于 2013-07-08T03:20:56.410 回答