我如何使用多個jQuery的UI滑塊作爲過濾

Question

有這樣的jsfiddle http://jsfiddle.net/danieltulp/gz5gN/

我想做的事是fiter約6滑塊上數據 - 性能的無序列表。但對於我的發展，我只使用兩個

第一個問題：質量滑塊工作得很好，但是當我滑動價格滑塊時，它將minP和maxP變量看作對象，爲什麼？我該如何解決這個問題？

第二個問題：我的代碼現在很麻煩，我必須編寫特定於每個過濾器的代碼（即：價格，質量等），我如何簡化/縮短我的代碼？從小提琴

代碼：

的Html

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"o/> 
<div class="demo"> 
    price<br /> 
    <div id="price"></div> 
    quality<br /> 
    <div id="quality"></div> 
    <ul id="products"> 
     <li data-price="10" data-quality="20"> product - £10 q20</li> 
     <li data-price="50" data-quality="40"> product - £50 q40</li> 
     <li data-price="100" data-quality="80"> product - £100 q80</li> 
     <li data-price="150" data-quality="30"> product - £150 q30</li> 
     <li data-price="200" data-quality="40"> product - £200 q40</li> 
    </ul> 
</div> 

的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); 
    }); 

編輯： 與最小最大變量是對象的第一個問題也發生了質量滑塊如果我搬家質量高於價格的質量聲明。價格是正確的。所以它似乎是幻燈片函數中的if語句的問題。

Answer 1

它似乎有一個非常方便的jQuery插件稱爲過濾器。JS

演示：http://jiren.github.com/filter.js/filterjs.html

github上：https://github.com/jiren/filter.js

教程：http://blog.joshsoftware.com/2011/09/28/filter-js-client-side-search-filtering-using-json-and-jquery/

Answer 2

似乎改變滑動事件改變允許我使用

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上，我不知道這是如何工作實際鼠標） 看到http://jqueryui.com/demos/slider/#event-slide更多信息

現在工作的jsfiddle http://jsfiddle.net/danieltulp/gz5gN/42/

我還需要簡化/縮短我的代碼

---

編輯：

我有做至少更加清晰的代碼

首先我需要determing的slidervalue是否增加或減少一個想法那麼我可以過濾只顯示或隱藏的列表項目，以隱藏或顯示

這隻允許影響已經過濾的列表項，所以我不需要再次隱藏它們，因爲我在做我的以前的代碼

但我的jsfiddle打破了我的代碼中的東西，但我不能縮小它，任何想法？ http://jsfiddle.net/danieltulp/4uF3e/4/