修复 jQuery 投资组合过滤器的问题

Question

我一直在研究我的在线作品集，试图创建一个可过滤的部分。基本上，我试图得到以下结果：

点击过滤器部分的标签应该显示相应的作品，隐藏其余的

我不确定如何实现这一点，并且我不想使用 jQueru 插件。我的代码的最后两行工作正常，但其他地方有问题。

$('.filters li').click(function() {

    if ($(this).attr('id') == '#all') {
    $('#works ul li').animate({
        opacity : '0'
    });
    }
    else {
        $(this).trigger('show');
        $(this).trigger('hide');
    }


    $('.filters li').removeClass('current');
    $(this).addClass('current');
});

这是 HTML 代码：

<ul class="filters">
<li id="all">Tous</li>
<li id="webdesign">Web Design</li>

<section id="works">
<ul>
    <li class="webdesign">
    <span class="details">
        <h4>title</h4>
        <p>skills</p>
    </span>
    <img src="http://placekitten.com/365/240" alt="">
    </li>
    <li class="wordpress">
    <span class="details">
        <h4>title</h4>
        <p>skills</p>
    </span>
    <img src="http://placekitten.com/365/240" alt="">
    </li>
</ul>
</section>

Answer 1

首先声明我们的变量，然后将我们的选择器缓存到两个元素：

var filtr = $("#filters"), 
    works = $("#works li"), 
    curnt = "current",
    clsID = "";

接下来我们设置事件委托，这意味着我们只绑定一个事件，但我们利用冒泡行为来侦听通过单击嵌套的li 元素启动的事件：

filtr.on("click", "li", applyFilter);

最后，我们声明处理程序的行为。在这种情况下，我们捕获单击的列表项的id（如果不存在 id，则为“全部”），并使用它来过滤 #works 元素中的列表项：

function applyFilter () {
    clsID = this.id || "all";
    clsID === "all"
        ? works.removeClass(curnt).show()
        : works.not("." + clsID).removeClass(curnt).hide()
               .siblings().addClass(curnt).show();
}​​

小提琴：http://jsfiddle.net/mrU4Y/10/