Как использовать несколько слайдеров JQuery-ui в качестве фильтров

Question

У меня есть этот jsfiddle http://jsfiddle.net/danieltulp/gz5gn/

То, что я хочу сделать, это FITER неупорядоченный список данных- недвижимости с примерно 6 ползунами.Но для моего развития я просто использую два

Первый вопрос: слайдер качества работает просто отлично, но когда я сдвинул ценовой ползунок, он видит переменные MINP и MAXP в качестве объектов, почему?Как я могу это исправить?

Второй вопрос: мой код сейчас ramity Messy, я должен написать код, специфичный для каждого фильтра (т. Е. Цена, качество, и т. Д.) Как я могу упростить / сократить мой код?

код из скрипки:

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

.

Редактировать: Первая проблема с объектами «MIN MAX», являющихся объектами, которые также происходят с ползунком качества, если я перемещаю, если из-за качественного качества выше по цене.Ценные значения тогда правильные.Таким образом, кажется, что это проблема с операторами IF в функции слайдов.

Answer 1

Похоже, есть очень удобный плагин jQuery называется filter.js

Demo: 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-us-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/

Теперь мне все еще нужно упростить / сократить мой код

---

Редактировать :

У меня есть идея сделать хотя бы более четкий код

Сначала мне нужно определить, увеличившись ли Slidervalue, тогда я могу фильтровать только для отображения или скрытых элементов списка, чтобы либо скрыть, либо показать

Это позволяет только эффектировать уже отфильтрованные элементы списка, поэтому мне не нужно снова скрывать их, как я делал в моем предыдущем коде

Но мой jsfiddle перерывается на что-то в моем коде, но я не могу сузить его, любые идеи? http://jsfiddle.net/danieltulp/4uf3e/4/