我有这个jsfiddle http://jsfiddle.net/danieltulp/gz5gN/
我想要做的是用大约 6 个 slider 来拟合数据属性的无序列表。但对于我的开发,我只使用两个
第一个问题:质量 slider 工作得很好,但是当我滑动价格 slider 时,它会将 minP 和 maxP 变量视为对象,为什么?我该如何解决这个问题?
第二个问题:我的代码现在非常困惑,我必须编写特定于每个过滤器的代码(即:价格、质量等),我如何简化/缩短我的代码?
fiddle 代码:
HTML
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"o/>
<div class="demo">
price<br />
<div id="price"></div>
quality<br />
<div id="quality"></div>
<ul id="products">
<li data-price="10" data-quality="20"> product - £10 q20</li>
<li data-price="50" data-quality="40"> product - £50 q40</li>
<li data-price="100" data-quality="80"> product - £100 q80</li>
<li data-price="150" data-quality="30"> product - £150 q30</li>
<li data-price="200" data-quality="40"> product - £200 q40</li>
</ul>
</div>
Javascript
function showProducts(minP, maxP, minQ, maxQ) {
$("#products li").filter(function() {
var price = parseInt($(this).data("price"), 10);
var quality = parseInt($(this).data("quality"), 10);
if(price >= minP && price <= maxP && quality >= minQ && quality <= maxQ){
$(this).show();
} else {
$(this).hide();
}
});
}
$(function() {
var options = {
range: true,
min: 0,
max: 250,
values: [0, 250],
slide: function(event, ui) {
if(event.target.id = "price"){
var minP = ui.values[0],
maxP = ui.values[1],
minQ = $("#quality").slider("values", 0),
maxQ = $("#quality").slider("values", 1);
}
if(event.target.id = "quality"){
var minP = $("#price").slider("values", 0),
maxP = $("#price").slider("values", 1),
minQ = ui.values[0],
maxQ = ui.values[1];
}
alert(minP +", "+ maxP +", "+ minQ +", "+ maxQ);
showProducts(minP, maxP, minQ, maxQ);
}
};
$("#price").slider(options);
$("#quality").slider(options);
});
编辑: 如果我将质量 if 语句移到价格语句之上,则最小最大变量作为对象的第一个问题也会发生在质量 slider 上。那么价格值就是正确的。所以看来是幻灯片函数中的 if 语句有问题。
最佳答案
似乎有一个非常方便的jquery插件,名为filter.js
演示:http://jiren.github.com/filter.js/filterjs.html
关于jquery-ui - 如何使用多个 jquery-ui slider 作为过滤器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11675531/