Cómo usar múltiples controles deslizantes JQery-UI como filtros

Question

Tengo este jsfiddle http://jsfiddle.net/danieltulp/gz5n/

Lo que quiero hacer es FITER Una lista desordenada en propiedades de datos con aproximadamente 6 controles deslizantes.Pero para mi desarrollo solo estoy usando dos

Primera pregunta: el control deslizante de calidad funciona bien, pero cuando deslice el control deslizante de precios, ve las variables MINP y maxp como objetos, ¿por qué?¿Cómo puedo arreglar eso?

Segunda pregunta: Mi código ahora está muy desordenado, tengo que escribir código específico a cada filtro (es decir, precio, calidad, etc.), ¿cómo puedo simplificar / acortar mi código?

Código de Fiddle:

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: El primer problema con las variables MIN MAX que son objetos también le sucede al control deslizante de calidad si muevo el estado de calidad de la calidad superior al precio.Los valores de precios son entonces correctos.Por lo tanto, parece ser un problema con las afirmaciones de IF en la función deslizante.

Answer 1

Aparece que hay un complemento jQuery muy útil llamado Filter.js

Demo: http://jiren.github.com/filter.js/filterjs.html

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

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

Answer 2

Parece que cambiar el evento de diapositiva para cambiar 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);
    }

Esto no fue posible con el evento de diapositivas, ya que estas afirmaciones tomaron los valores antiguos, ya que el evento de diapositivas se activa durante el deslizamiento (probado en iPad, no estoy seguro de cómo funciona esto con el mouse real) Consulte http://jqueryui.com/demos/slider/#event-slide para Más información

trabajando jsfiddle http://jsfiddle.net/danieltulp/gz5n/42/

Ahora todavía necesito simplificar / acortar mi código

---

editar :

Tengo una idea para hacer al menos código más claro

Primero necesito determinar si el SlideVervalue ha aumentado o disminuido, entonces puedo filtrar solo para que los elementos de la lista se muestran o ocultos se oculten o muestren

Esto permite que solo los elementos de la lista ya filtrados, así que no necesito ocultarlos nuevamente, ya que estaba haciendo en mi código anterior

Pero mi jsfiddle se rompe en algo en mi código, pero no puedo reducirlo, ¿alguna idea? http://jsfiddle.net/danieltulp/4uf3e/4/