javascript - 价格 slider 过滤器

Question

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

我在修改 jQuery 时遇到问题，因此使用价格 slider 实际上会过滤产品图片。我知道我需要使用 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">$158.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">$300.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">$5000.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">$256.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">$550.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 事件，遍历产品并显示/隐藏它们

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