Question

我目前有一些代码可以使用滑块根据价格范围过滤数组。我需要能够为各种大小和颜色添加复选框，以便我也可以使用它们的值进行过滤。这是我到目前为止的代码，但我不确定如何实现复选框，以便我有多种方法来过滤数组。

//this is the main generated array
    var product = [{"price":"200","color":"red","size":"small"},
                   {"price":"250","color":"brown","size":"medium"},
                   {"price":"300","color":"red","size":"large"}];

// array to display filtered array
    var filteredProducts = [];  
    var key = 0;

//start of price range filter
    if(!minPrice && !maxPrice){
       filteredProducts = products;
    } else{
       $.each(products, function(i, object) {   
           var curentPrice = parseFloat(object.price); 
           var priceMinOk = true;
           var priceMaxOk = true;
       // filter results match the price range
           if(maxPrice || minPrice){
              if(maxPrice && maxPrice<curentPrice){
                 priceMaxOk = false;
              }
              if(minPrice && minPrice>curentPrice){
                 priceMinOk = false;
              }
           }  
       //  loop over list and get only related to new array
           if( priceMinOk && priceMaxOk ){  
              filteredProducts[key] = object;                  
              key++;
           }  
       });
    }

提前感谢您提供任何帮助“

小提琴http://jsfiddle.net/ltbmedia/86pEn/

Answer 1

使用$.grep代替$.each，并构建如下代码：

var products = [ /* ... */ ],
    predicates = [
        function predicate1(obj) { /* ... */ },
        function predicate2(obj) { /* ... */ },
        // ... ,
        function predicateN(obj) { /* ... */ }
    ],
    filteredProducts;

filteredProducts = $.grep(products, function (element, index)
{
    for (var i=0; i<predicates.length; i++)
    {
        if (!predicates[i](element)) return false;
    }

    return true;
});

示例：http://jsfiddle.net/mattball/Rsbcu/

更复杂的例子：http://jsfiddle.net/mattball/vZzjM/

你可能会注意到你仍然仍然获得一个空数组，但这实际上是有道理的。根据您指定的条件（minPrice = 201, maxPrice = 301, color = red or green, size = small），没有匹配的数组元素。

放开价格标准只是一个微小的位，你会发现一切都按预期工作：http://jsfiddle.net/mattball/MQ8Mc/

如何在JQuery数组上使用多个过滤器

1 个答案: