Come utilizzare più cursori JQuery-UI come filtri

Question

Ho questo jsfiddle http://jsfiddle.net/danieltulp/gz5gn/ Quello che voglio fare è in fiter una lista non ordinata sulle proprietà dei dati con circa 6 cursori.Ma per il mio sviluppo sto solo usando due

Prima domanda: il cursore di qualità funziona bene, ma quando faccio scorrere il cursore dei prezzi vede le variabili del minp e maxp come oggetti, perché?Come posso risolverlo?

Seconda domanda: il mio codice è ora pretty disordinato, devo scrivere codice specifico per ogni filtro (cioè: prezzo, qualità, ecc.), Come posso semplificare / accorciare il mio codice?

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

.

Modifica: Il primo problema con le variabili minimo minimo sono gli oggetti accade anche al cursore della qualità se muovo la dichiarazione di qualità sopra l'una per il prezzo.I valori dei prezzi sono quindi corretti.Quindi sembra essere un problema con le istruzioni IF nella funzione di diapositiva.

Answer 1

Sembra che ci sia un plugin jQuery molto utile chiamato 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/filter-js-client-side-search-filtering-using-json-and-jquery/

Answer 2

Sembra che la modifica dell'evento di diapositiva per cambiare mi permetta di utilizzare

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

.

Questo non è stato possibile con l'evento di diapositiva poiché queste affermazioni hanno quindi impiegato i valori vecchi poiché l'evento di diapositiva viene attivato durante lo scorrimento (testato su iPad, non sono sicuro di come funziona con il mouse effettivo) Vedi http://jqueryui.com/demos/slider/#event-slide per Maggiori informazioni

Lavorando Jsfiddle http://jsfiddle.net/danieltulp/gz5GN/42/

Ora ho ancora bisogno di semplificare / accorciare il mio codice

---

.

Modifica :

Ho un'idea per fare almeno codice più chiaro

Per prima cosa ho bisogno di determinare se la slidervalue è aumentata o diminuita, posso filtrare solo per gli elementi elenchi visualizzati o nascosti per nascondere o mostrare

Ciò consente di effettuare solo gli elementi dell'elenco già filtrati in modo che non abbia bisogno di nasconderli di nuovo come stavo facendo nel mio codice precedente

Ma il mio jsfiddle si rompe su qualcosa nel mio codice ma non posso restringerlo, qualsiasi idea? http://jsfiddle.net/danieltulp/4uf3e/4/