0
使用jQuery幻燈片過濾器來過濾價格上的產品。您可以在腳本中設置過濾值 - 但我更願意根據使用數據屬性的頁面上的最高/最低編號動態設置值。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);
});
哇,這很有趣。它的工作非常好。一個後續問題 - 是否可以將值(值:[50,300])設置爲最低/最高的數字?我基本上試圖讓滑塊在兩端都得到擴展。 –
@JerrySvensson對不起,我不確定我是否完全給你 –
對不起,我試着反思。滑動條 - 它顯示每個定義的值(值:[50,300]),但我希望它顯示每個動態值(分鐘:Math.min.apply(數學,價格), max:Math.max.apply (數學,價格)),這樣tjeldiebar永遠不會有任何空的空間 - 它應該從最低的數字開始並以最高的結尾 –