2010-04-24 134 views
1

HTML:過濾的內容(jQuery的)

<div class="filter"> 
    <a href="#category-1">category 1</a> 
    <a href="#category-2">category 2</a> 
</div> 
<ul class="items"> 
    <li class="category-1">item 1</li> 
    <li class="category-1">item 2</li> 
    <li class="category-2">item 3</li> 
    <li class="category-2">item 4</li> 
</ul> 

我要的是例如點擊「1類」鏈接應隱藏列表中的所有其他類別的項目。

我知道jQuery的.filter()選擇器可以使用,但我不知道如何實現它在我這裏的目的。

感謝您的幫助!

回答

3
$('div.filter').delegate('a', 'click', function (event) { 
    $('ul.items li').hide().filter('.' + this.href.slice(this.href.indexOf("#") + 1)).show(); 

    event.preventDefault(); 
}); 
+0

好又短,但我只是試過了,似乎沒有工作。 :( – 3zzy 2010-04-24 09:55:31

+0

哎呀,看編輯(證明這個現在工作:http://www.jsfiddle.net/ZKGy8/) – Matt 2010-04-24 09:58:24

+0

完美,謝謝!順便說一句,爲什麼委託,而不是簡單的.click(功能(),只是好奇?: ) – 3zzy 2010-04-24 10:03:38

0

基本上,你會做這樣的:$('.items li').hide(); $('.category-1').show();

可以隱藏所有其他菜單項第一,後者以顯示選定的:) 你可以簡單地把它放在<a>標籤的onclick