過濾內容（jQuery）

Question

HTML：

<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（）選擇器，但是我不確定如何實現此目的。

謝謝你的幫助！

Answer 1

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

  event.preventDefault();
});

Answer 2

基本上，您將執行以下操作： $('.items li').hide(); $('.category-1').show(); $('.items li').hide(); $('.category-1').show();

第一個隱藏所有其他菜單項，第二個隱藏所有菜單項：)您只需將其放在<a>標記的onclick中即可。