jQuery ценовой фильтр

Я создал слайдер цен jquery, но я не уверен, как отфильтровать результаты, чтобы при скольжении вы видели только продукты с таким значением в диапазоне.

HTML:

<div class="demo">

<p>
    <label for="amount">Price range:</label>
    <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>

<div id="slider-range"></div>
<ul>
        <li> product - £10 </li>
        <li> product - £50 </li>
        <li> product - £100 </li>
        <li> product - £150 </li>
        <li> product - £200 </li>
    </ul>
</div>​

JavaScript:

$(function() {
    var options = 
        {
            range: true,
            min: 0,
            max: 500,
            values: [ 50, 300 ],
            slide: function( event, ui ) {
                $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
            }
        };

        $( "#slider-range" ).slider(
            options
        );
        $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
            " - $" + $( "#slider-range" ).slider( "values", 1 ) );
    });

Моя скрипка - этоhttp: //jsfiddle.net/ktcle/uvJ8F

 Ireally Rock28 мая 2012 г., 18:02
да, сейчас все это делается локально
 Andrew Whitaker28 мая 2012 г., 17:35
Можете ли вы изменить разметку?

Ответы на вопрос(1)

Решение Вопроса

Дайте свой список продуктов иid атрибут и дать каждому продуктуdata-price атрибут, равный цене товара:

<ul id="products">
    <li data-price="10"> product - £10 </li>
    <li data-price="50"> product - £50 </li>
    <li data-price="100"> product - £100 </li>
    <li data-price="150"> product - £150 </li>
    <li data-price="200"> product - £200 </li>
</ul>

Добавьте функцию, которая будет показывать или скрывать эти продукты, когдаslide происходит событие:

function showProducts(minPrice, maxPrice) {
    $("#products li").hide().filter(function() {
        var price = parseInt($(this).data("price"), 10);
        return price >= minPrice && price <= maxPrice;
    }).show();
}

Позвоните этой функции изslide обработчик события

slide: function(event, ui) {
    var min = ui.values[0],
        max = ui.values[1];

    $("#amount").val("$" + min + " - $" + max);
    showProducts(min, max);
}

Также вызывайте эту функцию сразу после инициализации слайдера, чтобы правильные продукты изначально были скрыты:

var options = {
   /* snip */
}, min, max;

$("#slider-range").slider(options);

min = $("#slider-range").slider("values", 0);
max = $("#slider-range").slider("values", 1);

$("#amount").val("$" + min + " - $" + max);

showProducts(min, max);

Весь фрагмент:

function showProducts(minPrice, maxPrice) {
    $("#products li").hide().filter(function() {
        var price = parseInt($(this).data("price"), 10);
        return price >= minPrice && price <= maxPrice;
    }).show();
}

$(function() {
    var options = {
        range: true,
        min: 0,
        max: 500,
        values: [50, 300],
        slide: function(event, ui) {
            var min = ui.values[0],
                max = ui.values[1];

            $("#amount").val("$" + min + " - $" + max);
            showProducts(min, max);
        }
    }, min, max;

    $("#slider-range").slider(options);

    min = $("#slider-range").slider("values", 0);
    max = $("#slider-range").slider("values", 1);

    $("#amount").val("$" + min + " - $" + max);

    showProducts(min, max);
});​

Пример http: //jsfiddle.net/5aPg7

 Ireally Rock29 мая 2012 г., 10:32
ты легенда
 Andrew Whitaker29 мая 2012 г., 14:32
@ IreallyRock: рад помочь. Пожалуйста принять ответ если бы это помогло!
 Daniël Tulp20 июл. 2012 г., 17:12
Спасибо, сработало и у меня. Но сейчас я пытаюсь создать несколько ползунков, фильтрующих одни и те же элементы списка. Не могу заставить его работать из этого примера. Любые идеи

Ваш ответ на вопрос