0

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

单击过滤器部分中的标签应显示适当的作品，隐藏其余作品

我不确定如何实现这一点，并且我不想使用 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>
4

1 回答 1

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/

于 2012-12-18T14:07:08.480 回答