Question

我有一堆价格的产品图片，我想使用价格滑块来过滤显示哪些。我尝试完成此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>

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

价格滑块过滤器

1 个答案: