如何使用多个jQuery-UI滑块作为过滤器
-
12-12-2019 - |
题
我有这个jsfiddle http://jsfiddle.net/danieltulp/gz5gn/
我想做的是粘贴在数据属性上的无序列表,大约6个滑块。但是对于我的发展,我只是使用两个
首先问题:质量滑块工作刚好,但是当我滑动价格滑块时,它将minp和maxp变量视为对象,为什么?我怎样才能解决这个问题?
第二个问题:我的代码现在是pritty凌乱,我必须编写特定于每个过滤器的代码(即:价格,质量等),如何简化/缩短我的代码? 来自小提琴的代码:
编辑: 如果我移动IF质量声明,则MIN MAX变量是对象的第一个问题也会发生在质量滑块上方的价格上方。价格值正确。因此,幻灯片函数中的IF语句似乎是一个问题。
解决方案
它看起来有一个非常方便的jquery插件,称为filter.js
演示: http://jiren.github.com/filter.js/filterjs。html
其他提示
似乎将幻灯片事件更改更改允许我使用
change: function(event, ui) {
var minP = $("#price").slider("values", 0);
var maxP = $("#price").slider("values", 1);
var minQ = $("#quality").slider("values", 0);
var maxQ = $("#quality").slider("values", 1);
showProducts(minP, maxP, minQ, maxQ);
}
.
这是不可能的幻灯片事件,因为这些语句将旧值拍摄,因为在滑动期间触发幻灯片事件(在iPad上测试,我不确定这与实际鼠标有效。 查看 http://jqueryui.com/demos/slider/#event-slide for更多信息
工作jsfiddle http://jsfiddle.net/danieltulp/gz5gn/42/>
编辑:
我有一个想到至少更清晰的代码
首先,我需要确定幻灯检索是否增加或减少,然后我只能过滤仅显示或隐藏的列表项,以隐藏或显示
这允许仅效果已过滤列表项,因此我不需要再次隐藏它们,因为我在上一级代码中正在进行中
但是我的jsfiddle在我的代码中打破了一些东西,但我无法缩小它,任何想法? http://jsfiddle.net/danieltulp/4uf3e/4/