jQuery价格过滤器 - 从过滤器对象设置幻灯片值

Question

使用jQuery幻灯片过滤器来过滤价格上的产品。您可以在脚本中设置过滤值 - 但我更愿意根据使用数据属性的页面上的最高/最低编号动态设置值。

这可能吗？

过滤对象：

<div class="priceinfo col5" data-price="100">100</div> 
<div class="priceinfo col5" data-price="1000">1000</div> 

脚本：

function showProducts(minPrice, maxPrice) { 
$("#products li").hide().filter(function() { 
    var price = parseInt($(this).data("price"), 10); 
    return price >= minPrice && price <= maxPrice; 
}).show(); 
} 

$(function() { 
var options = { 
    range: true, 
    min: 0, 
    max: 500, 
    values: [50, 300], 
    slide: function(event, ui) { 
     var min = ui.values[0], 
      max = ui.values[1]; 

     $("#amount").val("$" + min + " - $" + max); 
     showProducts(min, max); 
    } 
}, min, max; 

$("#slider-range").slider(options); 

min = $("#slider-range").slider("values", 0); 
max = $("#slider-range").slider("values", 1); 

$("#amount").val("$" + min + " - $" + max); 

showProducts(min, max); 
}); 

http://jsfiddle.net/5aPg7/

Answer 1

你可以得到所有的price值，然后找到最大&分钟像

function showProducts(minPrice, maxPrice) { 
 
    $("#products li").hide().filter(function() { 
 
    var price = parseInt($(this).data("price"), 10); 
 
    return price >= minPrice && price <= maxPrice; 
 
    }).show(); 
 
} 
 

 
$(function() { 
 
    var prices = $('#products li').map(function() { 
 
    return $(this).data('price'); 
 
    }).get(); 
 
    var options = { 
 
     range: true, 
 
     min: Math.min.apply(Math, prices), 
 
     max: Math.max.apply(Math, prices), 
 
     values: [50, 300], 
 
     slide: function(event, ui) { 
 
     var min = ui.values[0], 
 
      max = ui.values[1]; 
 

 
     $("#amount").val("$" + min + " - $" + max); 
 
     showProducts(min, max); 
 
     } 
 
    }, 
 
    min, max; 
 

 
    $("#slider-range").slider(options); 
 

 
    min = $("#slider-range").slider("values", 0); 
 
    max = $("#slider-range").slider("values", 1); 
 

 
    $("#amount").val("$" + min + " - $" + max); 
 

 
    showProducts(min, max); 
 
});

.demo { 
 
    padding: 25px; 
 
}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script> 
 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css"> 
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script> 
 
<div class="demo"> 
 

 
    <p> 
 
    <label for="amount">Price range:</label> 
 
    <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /> 
 
    </p> 
 

 
    <div id="slider-range"></div> 
 
    <ul id="products"> 
 
    <li data-price="10">product - £10</li> 
 
    <li data-price="50">product - £50</li> 
 
    <li data-price="100">product - £100</li> 
 
    <li data-price="150">product - £150</li> 
 
    <li data-price="200">product - £200</li> 
 
    </ul> 
 
</div>