使用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

回答

相關問題