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元素发起的事件： / p>

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

最后，我们声明处理程序的行为。在这种情况下，我们捕获单击列表项的id（如果不存在id，则为“all”），我们使用它来过滤#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/

修复了jQuery产品组合过滤器的问题

1 个答案: