Question

我正在尝试使用侧导航按类别使用jQuery显示表行。

<ul class="side-nav">
<li class="head">categories</li>
    <li><a class="item" href="#">Show all</a></li>
<li><a class="accessories" href="#">Accessories</a></li>
<li><a class="books" href="#">Books</a></li>
<li><a class="electronics" href="#">Electronics</a></li>
<li><a class="dvd" href="#">Dvd</a></li>
<li><a class="misc" href="#">Misc.</a></li>
</ul>

<table>
<tr class="item misc.">
<td>1964 Jaguar model car</td>
<td>Misc.</td>
</tr>
<tr class="item dvd">
<td>Up(Pixar)</td>
<td>Dvd</td>
</tr>
<tr class="item electronics">
<td>Apple iMac</td>
<td>Electronics</td>
</tr>
</table>

目前我正在使用这样的东西，只是为每个类别重复它，但这些类别最终将动态添加，这不会削减它。我知道必须有一个更简单的方法。谢谢你的帮助。

$('a.electronics').click(function() {
$('tr.item').hide();
$('tr.electronics').fadeIn();
});

$('a.item').click(function() {
$('tr.item').fadeIn();
});

Answer 1

您将不得不以某种方式存储超链接和表格行之间的链接。您可以通过以下方式执行此操作：

1）单独绑定每一个：这基本上意味着让你的脚本写出一些东西来绑定它们，类似于你现在刚刚生成的表格所生成的内容。您可能希望将功能移动到您调用的单个函数中，而不是将其写入每个函数，但每个函数都需要单独绑定。

2）使用超链接的某些属性。在你的例子中，你基本上使用了CSS类，所以你可以这样：

$('.sidenav a').click(function() {
   $('tr.item').hide();
   $('tr.' + $(this).attr('class')).fadeIn();
});

但是如果你在你的a中添加另一个类那么就会中断。您还可以使用另一个属性进行此映射，或者ID之间的某些关系（EG：A是'#electronics'而tr是'#electronicsrow'然后在第二个你去$('#'+$(this).attr('id')+'row')），因此它不会影响你能够为它添加CSS类的能力。你也可以组建自己的假属性来存储映射，但是因为它不会验证。

Answer 2

你走了：

$(function()
{
    $('ul.side-nav a').click(function()
    {
       $('tr.item').hide();
       $('tr.' + $(this).attr('class')).fadeIn();       
    });
});

工作示例：http://jsbin.com/eratu3

使用nav使用jQuery显示/隐藏表行

2 个答案: