como usar vários controles deslizantes jquery-ui como filtros

Question

eu tenho esse jsfiddle http://jsfiddle.net/danieltulp/gz5gN/

o que eu quero fazer é ajustar uma lista não ordenada em propriedades de dados com cerca de 6 controles deslizantes.mas para o meu desenvolvimento estou usando apenas dois

primeira pergunta:o controle deslizante de qualidade funciona bem, mas quando deslizo o controle deslizante de preço, ele vê as variáveis ​​minP e maxP como objetos, por quê?como posso consertar isso?

segunda questão:meu código agora está muito bagunçado, tenho que escrever um código específico para cada filtro (ou seja:preço, qualidade, etc.), como posso simplificar/encurtar meu código?

Código do violino:

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

Editar:O primeiro problema com as variáveis ​​min max sendo objetos também acontece com o controle deslizante de qualidade se eu mover a declaração if de qualidade acima daquela de preço.Os valores dos preços estão então corretos.Portanto, parece haver um problema com as instruções if na função slide.

Answer 1

parece que existe um plugin jquery muito útil chamado filter.js

demonstração: http://jiren.github.com/filter.js/filterjs.html

GitHub: https://github.com/jiren/filter.js

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

Answer 2

parece que alterar o evento de slide para alterar me permite usar

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

isso não foi possível com o evento slide, pois essas instruções tomaram os valores antigos à medida que o evento slide é acionado durante o deslizamento (testado no iPad, não tenho certeza de como isso funciona com o mouse real) ver http://jqueryui.com/demos/slider/#event-slide para mais informações

trabalhando jsfiddlehttp://jsfiddle.net/danieltulp/gz5gN/42/

agora ainda preciso simplificar/encurtar meu código

---

editar:

eu tenho uma ideia para fazer pelo menos um código mais claro

primeiro preciso determinar se o valor do controle deslizante aumentou ou diminuiu, então posso filtrar apenas os itens da lista mostrados ou ocultos para ocultar ou mostrar

isso permite afetar apenas os itens da lista já filtrados, então não preciso ocultá-los novamente, como estava fazendo no meu código anterior

mas meu jsfiddle quebra em algo no meu código, mas não consigo restringi-lo, alguma ideia?http://jsfiddle.net/danieltulp/4uF3e/4/