使用jQuery

时间:2016-01-19 09:53:07

标签: javascript jquery html filter

我需要一些jQuery过滤和选择方面的帮助。 我有一个元素列表

<ul>
    <li data-cat="1 4 6" data-level="1 2" data-price="500">Element 1</li>
    <li data-cat="1 2 5" data-level="1 3" data-price="300">Element 2</li>
    <li data-cat="2 4 6" data-level="3" data-price="450">Element 3</li>
</ul>

我必须过滤客户端(显示/隐藏)。 类别过滤器是radiobutton(单选),价格过滤器是jQuery UI滑块,级别过滤器是一组复选框(多选)。这3个控件会影响以下变量:

var filterCategory = 0;
var filterPriceFrom = 0; var filterPriceTo = 0;
var filterLevel = [];

在他们改变时我调用以下监听器,该监听器应用过滤器(尚未实现的过滤器)。

var list = $('ul > li');
list.hide();

if (filterCategory > 0){
    list = $('ul > li[data-cat~=\"' + filterCategory + '\"]');
}

list = list.filter(function() {
    var value = parseInt($(this).data('price'), 10);
    return value >= filterPriceFrom && value <= filterPriceTo;
});

list.show();

现在我必须添加级别过滤,这是一组复选框(多选)。我想我有两个选择

1:添加类似过滤器的块。这个解决方案的问题是我的过滤结果在&#34; list&#34; variabile的。我想使用jQuery data()选择器的强大功能。我该怎么做&#34; list&#34;输入中的变量(而不是整个DOM)再次应用过滤器?

$(list > data-level[...]) /* ??? */

2:将所有内容放在list.filter()块中。再说一遍:我怎样才能继续使用jQuery data()选择器?

 list = list.filter(function() {

    /* check if $(this) has filterCategory within data-cat attribute */

    /* check if $(this) has at least one of filterLevel elements within data-level attribute */

    var value = parseInt($(this).data('price'), 10);
    return value >= filterPriceFrom && value <= filterPriceTo;
});

谢谢。

0 个答案:

没有答案