如何使用查找 + 筛选器返回价格范围

Question

我有一个项目列表，我只需要返回价格在"min"和"max"价格范围之间的项目。

这是

按类对项目进行排序的完整工作示例，但如您所见，滑块不会影响价格范围，这是完整的代码：

http://jsfiddle.net/p2jwz/8/

所以，正如你所看到的，这是.find和.filter代码：

  var price = data.find('li').filter(function() {
    var price = parseFloat($(this).data('price'));
   return price >= minPrice && price <= maxPrice;
}); 

你能告诉我我做错了什么吗？

Answer 1

您可能需要

var price = data.find('li').filter(function() {
    var price = parseFloat($(this).data('price'));
   return price >= minPrice && price <= maxPrice;
}); 

filter（） 函数应该返回一个布尔值，指示当前计算的元素是否应包含在返回的集合中。如果返回 price，将返回每个没有 price === 0 的元素，因为正整数是"真"的，即当被视为布尔值时计算为 true。

你也有看起来像的东西

$(document).ready(function(){
...
    $(function(){
        ...
    });
});

即包装了两个 document.ready 函数绑定。我认为您可以简单地删除内部的。您的滑块似乎仍然以某种方式初始化，但也许这仍然会导致一些故障。

您的小提琴中也发生了错误：

TypeError： sel.getElement（...） is null

Answer 2

终于！我找到了解决方案，您只需要使用所有变量调用函数

function showProducts($holder, data, minPrice, maxPrice) {
   var $price = data.find('li').filter(function() {
        var $price = parseInt($(this).data("price"), 10);
        return $price >= minPrice && $price <= maxPrice;
    });
            // call quicksand and assign transition parameters
        $holder.quicksand($price, {
            duration: 800,
            easing: 'easeInOutQuad'
        });
        return false;
}

希望对您有所帮助！