Comment utiliser plusieurs curseurs JQuery-UI en tant que filtres

Question

J'ai ce jsfiddle http://jsfiddle.net/danieltulp/gz5gn/

Ce que je veux faire est d'une liste non commandée sur les propriétés de données avec environ 6 curseurs.Mais pour mon développement, j'utilise juste deux

Première question: le curseur de qualité fonctionne très bien, mais lorsque je glisse le curseur de prix, il voit les variables Minp et Maxp en tant qu'objets, pourquoi?Comment puis-je résoudre ce problème?

Deuxième question: Mon code est maintenant PRIMTY Messy, je dois écrire du code spécifique à chaque filtre (c.-à-d .: Prix, qualité, etc.), comment puis-je simplifier / raccourcir mon code?

code de violon:

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

EDIT: Le premier problème avec les variables MIN Max étant des objets est également sur le curseur de qualité si je déplace l'instruction IF de qualité supérieure à celle du prix.Les valeurs de prix sont alors correctes.Il semble donc s'agir d'un problème avec les instructions de si Slide Function.

Answer 1

Il apparaît qu'il y a un plug-in très pratique jquy appelé filter.js

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

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

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

Answer 2

Il semble que la modification de l'événement de la diapositive au changement me permet d'utiliser

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

Ce n'était pas possible avec l'événement diaporamique, car ces instructions ont ensuite pris les valeurs anciennes car l'événement de la diapositive est déclenché lors du glissement (testé sur iPad, je ne sais pas comment cela fonctionne avec la souris réelle) Voir http://jqueryui.com/demos/slider/#event-slide pour Plus d'infos

Travail Jsfiddle http://jsfiddle.net/danieltulp/gz5gn/42/

Maintenant, j'ai encore besoin de simplifier / raccourcir mon code

---

edit :

J'ai une idée de faire au moins de code plus clair

D'abord, je dois d'abord déterminer si le slidervalue a augmenté ou diminué, je peux alors filtrer uniquement pour afficher ou que des éléments de liste masqués à la masque ou montrent

Cela permet d'effectuer uniquement des éléments de liste déjà filtrés, donc je n'ai pas besoin de les cacher à nouveau comme je faisais dans mon code précédent

Mais mon jsfiddle rompt sur quelque chose dans mon code mais je ne peux pas l'étranger, aucune idée? http://jsfiddle.net/danieltulp/4uf3e/4/