价格滑块过滤器答案

【问题标题】：Price slider filter价格滑块过滤器
【发布时间】：2015-05-08 20:50:14
【问题描述】：

我有一堆带有价格的产品图片，我想使用价格滑块来筛选显示的产品图片。我正在尝试完成 post 中的内容，但使用 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">$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>

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

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

非常感谢！

【问题讨论】：

标签： javascript jquery html filter slider

【解决方案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();
    }
});

【讨论】：