javascript - jQuery:显示数字范围从/到的div？

Question

我正在尝试找出一种使用选择下拉列表来显示范围从/到数字的 div 的方法。

我创建了这个jsfiddle来解释这个问题:http://jsfiddle.net/chd836b8/2/

基本上，每个 div 都有一个 data-price="" 并且它们具有不同的值，正如您在 jsfiddle 中看到的那样!

我需要从下拉列表中选择价格范围并相应地显示div。到目前为止我还没有找到一种方法来做到这一点。

有人可以就这个问题提出建议吗？

提前致谢。

Answer 1

您可以通过向 option 元素添加 data 属性来确定该选择的最低/最高价格来实现此目的:

<select id="priceRange" style="width:101px; height:49px; background:#eeeeee; border-radius:8px;">
    <option data-price-min="0" data-price-max="49">Under 50</option>
    <option data-price-min="50" data-price-max="100">50 - 100</option>
    <option data-price-min="100" data-price-max="250">100 - 250</option>
    <option data-price-min="250" data-price-max="500">250 - 500</option>
    <option data-price-min="500" data-price-max="1000">500 - 1000</option>
    <option data-price-min="1000" data-price-max="9999">Over 1000</option>
</select>

然后在JS中，可以在select改变时读取这些属性，找到相关的.drag元素，其data-price落在这些范围之间:

$('select').on('change', function () {
    var $option = $(this).find('option:selected');
    var min = $option.data('price-min');
    var max = $option.data('price-max');
    $('.drag').hide().filter(function() {
        var price = $(this).data('price');
        return price >= min && price <= max;
    }).show();
});

Working example