我已经创建了我的jquery价格滑块,但我不确定如何过滤我的结果,以便在您滑动时只能看到具有该范围内值的产品。
HTML:
<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>
<li> product - £10 </li>
<li> product - £50 </li>
<li> product - £100 </li>
<li> product - £150 </li>
<li> product - £200 </li>
</ul>
</div>
JavaScript的:
$(function() {
var options =
{
range: true,
min: 0,
max: 500,
values: [ 50, 300 ],
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
};
$( "#slider-range" ).slider(
options
);
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
});
答案 0 :(得分:15)
我会做一些改变:
为您的商品列表添加id
属性,并为每件商品指定一个data-price
属性,该属性等于商品的价格:
<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>
添加一个在slide
事件发生时显示或隐藏这些产品的功能:
function showProducts(minPrice, maxPrice) {
$("#products li").hide().filter(function() {
var price = parseInt($(this).data("price"), 10);
return price >= minPrice && price <= maxPrice;
}).show();
}
从slide
事件处理程序调用该函数:
slide: function(event, ui) {
var min = ui.values[0],
max = ui.values[1];
$("#amount").val("$" + min + " - $" + max);
showProducts(min, max);
}
在初始化滑块后立即调用该功能,以便最初隐藏正确的产品:
var options = {
/* snip */
}, 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);
整个代码段:
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);
});