Jquery ui 如何使用多个jquery ui滑块作为过滤器

我有这把剑

我想做的是用大约6个滑块来填充一个无序的数据属性列表。但对于我的发展，我只使用了两个

第一个问题：质量滑块工作得很好，但是当我滑动价格滑块时，它会将minP和maxP变量视为对象，为什么？我怎样才能解决这个问题

第二个问题：我的代码现在非常凌乱，我必须针对每个过滤器编写代码（例如：价格、质量等），如何简化/缩短代码

来自fiddle的代码：

Html

价格

质量


产品-10英镑20季度
产品-40季度50英镑
产品-100英镑q80
产品-30季度150英镑
产品-第40季度200英镑

Javascript

function showProducts(minP, maxP, minQ, maxQ) {
    $("#products li").filter(function() {
        var price = parseInt($(this).data("price"), 10);
        var quality = parseInt($(this).data("quality"), 10);
        if(price >= minP && price <= maxP && quality >= minQ && quality <= maxQ){
             $(this).show();
        } else {
             $(this).hide();
        }
    });
}

$(function() {
    var options = {
        range: true,
        min: 0,
        max: 250,
        values: [0, 250],
        slide: function(event, ui) {
            if(event.target.id = "price"){
                var minP = ui.values[0],
                      maxP = ui.values[1],
                      minQ = $("#quality").slider("values", 0),
                      maxQ = $("#quality").slider("values", 1);
             }
            if(event.target.id = "quality"){
                var minP = $("#price").slider("values", 0),
                      maxP = $("#price").slider("values", 1),
                       minQ = ui.values[0],
                       maxQ = ui.values[1];
              }
              alert(minP +", "+ maxP +", "+ minQ +", "+ maxQ);
              showProducts(minP, maxP, minQ, maxQ);
          }
      };

     $("#price").slider(options);
     $("#quality").slider(options);
  });

函数showProducts（minP、maxP、minQ、maxQ）{
$（“#产品li”）.filter（函数（）{
var price=parseInt（$（此）.data（“价格”），10）；
var quality=parseInt（$（this）.data（“quality”），10）；
如果（price>=minP&&price=minQ&&quality，则将幻灯片事件更改为change似乎允许我使用

change: function(event, ui) {
        var minP = $("#price").slider("values", 0);
        var maxP = $("#price").slider("values", 1);
        var minQ = $("#quality").slider("values", 0);
        var maxQ = $("#quality").slider("values", 1);
        showProducts(minP, maxP, minQ, maxQ);
    }

这在滑动事件中是不可能的，因为在滑动过程中触发滑动事件时，这些语句会使用旧值（在iPad上测试，我不确定这在实际鼠标中是如何工作的）
有关更多信息，请参阅

工作桥

现在我仍然需要简化/缩短我的代码


编辑：

我有一个想法，至少要编写更清晰的代码

首先，我需要确定slidervalue是增加了还是减少了，然后我可以只过滤显示或隐藏的列表项来隐藏或显示

这只允许影响已经过滤的列表项，所以我不需要像在以前的代码中那样再次隐藏它们

但是我的JSFIDLE在我的代码中破坏了一些东西，但我不能缩小它的范围，有什么想法吗？
似乎有一个非常方便的jquery插件，名为filter.js

演示：

github：

教程：
我仍然需要缩短/清理我的代码。有人能帮我吗？也许是所有幻灯片名称的数组？我如何将其传递到我的showProducts中并使其工作。
change: function(event, ui) {
        var minP = $("#price").slider("values", 0);
        var maxP = $("#price").slider("values", 1);
        var minQ = $("#quality").slider("values", 0);
        var maxQ = $("#quality").slider("values", 1);
        showProducts(minP, maxP, minQ, maxQ);
    }