过滤内容 (jQuery)答案

【问题标题】：Filtering content (jQuery)过滤内容 (jQuery)
【发布时间】：2010-04-24 09:38:30
【问题描述】：

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() 选择器，但我不确定如何在这里实现它。

感谢您的帮助！

【问题讨论】：

标签： javascript jquery filter categories

【解决方案1】：

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

  event.preventDefault();
});

【讨论】：

完美，谢谢！顺便说一句，为什么委托而不是更简单的 .click(function()，只是好奇？:)
我发现它比将事件添加到每个锚标记更干净。

【解决方案2】：

基本上你会做这样的事情：$('.items li').hide(); $('.category-1').show();

第一个隐藏所有其他菜单项，后者显示选定的:) 你可以简单的把它放在<a>标签的onclick中。

【讨论】：