价格滑块过滤器

Question

我有一堆带有价格的产品图片，我想使用价格滑块来过滤显示哪些图片。我正在尝试完成此 post, but using Ion.RangeSlider 中的内容，因为我不想花很多时间自定义标准 jQuery 滑块 UI.

我在修改 jQuery 时遇到问题，因此使用价格滑块实际上会过滤产品图片。我知道我需要使用 onChange 方法，但我不知道如何真正做到这一点。

这是我的 JSFiddle。

HTML

<div class="range-slider">
    <input type="text" class="js-range-slider" value="" />
</div>
<div class="products" id="content">
    <div class="product" data-id="t-shirt-shirt" data-price="158" data-category="shirts b-stevenalan r-stevenalan">
        <div class="thumbnail">
            <a href="http://www.stevenalan.com/840390145802.html#cgid=mens-clothing-shirting&start=0&hitcount=99">
                <img src="http://s7d9.scene7.com/is/image/StevenAlan/S15_3_MST0113_H401_PD?$redesigngrid$">
            </a>
                <div class="price3"><a href="http://www.stevenalan.com/840390145802.html#cgid=mens-clothing-shirting&start=0&hitcount=99">8.00</a></div>
        </div>
    </div>

    <div class="product" data-id="t-shirt-shirt" data-price="300" data-category="shirts b-stevenalan r-stevenalan">
        <div class="thumbnail">
            <a href="http://www.stevenalan.com/840390145802.html#cgid=mens-clothing-shirting&start=0&hitcount=99">
                <img src="http://s7d9.scene7.com/is/image/StevenAlan/S15_3_MST0113_H401_PD?$redesigngrid$">
            </a>
                <div class="price3"><a href="http://www.stevenalan.com/840390145802.html#cgid=mens-clothing-shirting&start=0&hitcount=99">0.00</a></div>
        </div>
    </div>

    <div class="product" data-id="t-shirt-shirt" data-price="5000" data-category="shirts b-stevenalan r-stevenalan">
        <div class="thumbnail">
            <a href="http://www.stevenalan.com/840390145802.html#cgid=mens-clothing-shirting&start=0&hitcount=99">
                <img src="http://s7d9.scene7.com/is/image/StevenAlan/S15_3_MST0113_H401_PD?$redesigngrid$">
            </a>
                <div class="price3"><a href="http://www.stevenalan.com/840390145802.html#cgid=mens-clothing-shirting&start=0&hitcount=99">00.00</a></div>
        </div>
    </div>        

     <div class="product" data-id="t-shirt-shirt" data-price="256" data-category="shirts b-stevenalan r-stevenalan">
        <div class="thumbnail">
            <a href="http://www.stevenalan.com/840390145802.html#cgid=mens-clothing-shirting&start=0&hitcount=99">
                <img src="http://s7d9.scene7.com/is/image/StevenAlan/S15_3_MST0113_H401_PD?$redesigngrid$">
            </a>
                <div class="price3"><a href="http://www.stevenalan.com/840390145802.html#cgid=mens-clothing-shirting&start=0&hitcount=99">6.00</a></div>
        </div>
    </div>

    <div class="product" data-id="t-shirt-shirt" data-price="550" data-category="shirts b-stevenalan r-stevenalan">
        <div class="thumbnail">
            <a href="http://www.stevenalan.com/840390145802.html#cgid=mens-clothing-shirting&start=0&hitcount=99">
                <img src="http://s7d9.scene7.com/is/image/StevenAlan/S15_3_MST0113_H401_PD?$redesigngrid$">
            </a>
                <div class="price3"><a href="http://www.stevenalan.com/840390145802.html#cgid=mens-clothing-shirting&start=0&hitcount=99">0.00</a></div>
        </div>
    </div>

</div>

JS

var $range = $(".js-range-slider");

$range.ionRangeSlider({
    type: "double",
    min: 0,
    max: 5000,
    from: 0,
    to: 5000
});

非常感谢！

Answer 1

您只需要监听 onFinish 事件，迭代产品和 show/hide 它们

var $range = $(".js-range-slider");

$range.ionRangeSlider({
    type: "double",
    min: 0,
    max: 5000,
    from: 0,
    to: 5000,
    onFinish: function (num) {
         $('#content > .product').hide().filter(function() {
            var price = parseInt($(this).data("price"), 10);
            return price >= num.from && price <= num.to;
        }).show();
    }
});

价格滑块过滤器

Price slider filter

html

javascript

jquery

slider

filter