这是一个使用此脚本 http://www.eyecon.ro/bootstrap-slider 的范围 slider 我设置了一个 JSbin http://jsbin.com/xelas/1/edit?html,css,js,output#C:L20由于代码较多,已完成
我找不到此脚本的任何问题,因为它最初可以工作,但由于某种原因无法运行,并且根本没有错误消息。
脚本
jQuery(document).ready(function ($) {
$("#priceslider").sdcslider({
range: true,
orientation: 'horizontal',
min: 170000,
max: 500000,
step: 10000,
tooltip: 'hide',
value: [170000, 500000]
});
$("#pricerange").text("$170.000 - $500.000");
$("#priceslider").on('slide', function (slideEvt) {
//console.log(slideEvt);
$("#pricerange").text("$" + slideEvt.value[0] + " - $" + slideEvt.value[1]);
var mi = slideEvt.value[0];
var mx = slideEvt.value[1];
filterPropertyPrice(mi, mx);
});
function filterPropertyPrice(minPrice, maxPrice) {
$(".property").filter(function () {
var price = parseInt($(this).data("price"));
return price >= minPrice && price <= maxPrice;
}).show();
}
});
HTML
<h4> Price Range: <span id="pricerange"></span></h4>
<input id="priceslider" class="sdcslider" type="text">
<div class="property" data-bedroom="3" data-price="300000">Property One</div>
<div class="property" data-bedroom="3" data-price="400000">Property Two</div>
<div class="property" data-bedroom="3" data-price="450000">Property Three</div>
<div class="property" data-bedroom="3" data-price="350000">Property Four</div>
<div class="property" data-bedroom="3" data-price="500000">Property Five</div>
感谢和问候 说
最佳答案
你必须先隐藏它们
function filterPropertyPrice(minPrice, maxPrice) {
$(".property") // select all the properties
.hide() // hide all of them
.filter(function () { // filter the ones that match the price
var price = parseInt($(this).data("price"));
return price >= minPrice && price <= maxPrice;
}).show(); // show only the filtered ones
}
关于javascript - 脚本无法运行且没有错误消息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24828543/