使用NAV使用jQuery

我尝试使用侧边导航使用jQuery，按类别显示表行显示/隐藏表行。使用NAV使用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(); 
});

来源

2009-12-04 nickespi

您将不得不以某种方式存储超链接和表格行之间的链接。你可以通过两种做到这一点：

1）单独装订各一个：这主要指具有脚本写出来的东西约束他们，类似于你现在只是任何代码，使您的表生成的内容。您可能希望将功能移到您要调用的单个函数中，而不是将它们写出来，但每个函数都需要单独绑定。

2）利用超链接的一些属性。在您的例子你已经基本上使用的CSS类，所以你可以去是这样的：

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

但是如果你添加另一个类的一个那么这会打破。你也可以使用这个映射另一个属性，或ID的之间的一些关系（例如：在A是“#electronics”和TR是“#electronicsrow”，然后在第二个你只是去$('#'+$(this).attr('id')+'row')），使之不会因为你能够向其中添加CSS类而做什么。你也可以组成你自己的假属性来存储映射，但是如此整洁，它不会被验证。

来源

2009-12-04 03:55:46 fyjham

谢谢！这很快且非常有帮助。 – nickespi 2009-12-04 04:05:44

在这里你去：

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

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

来源

2009-12-04 03:57:32

使用NAV使用jQuery

回答

相关问题