Question

我需要一些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;
});

谢谢。

使用jQuery

0 个答案: