Question

我的第一个问题！我已经找到了可能的方法来完成我想要的功能，却找不到任何帮助我的东西..

我是javascript的新手，并以此为基础： http://jsfiddle.net/danieltulp/gz5gN/42/ 当我调整价格滑块时，我想查看我正在搜索的数字的价格。

离。从123 $ - 900 $

搜索

质量相同。

我也试图让每个滑块都有不同的min-max和值，这可能吗？

$(function() {
var options = {
    range: true,
    min: 0,
    max: 250,
    step: 1,
    values: [0, 250],
    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);
    }
};

Answer 1

需要2个功能。每个滑块的onChange事件一个。每个onChange函数执行后，应根据计算结果更新每个滑块的min和max值。 showProducts()将以当前形式运作。

这种用户体验感觉太复杂了。您是否考虑以其他方式表示数据过滤？

Answer 2

这就是我解决它的方式！

在这里找到小提琴：http://jsfiddle.net/5PAa7/28/ 我把它放在两个变量而不是两个函数中。

function showProductsP(minP, maxP) {
$(".product-box").filter(function() {
    var price = parseInt($(this).data("price"), 10);
    if(price >= minP && price <= maxP){
         $(this).show();
    } else {
         $(this).hide();
    }
});
$(function() {
var options = {
    range: true,
    min: 0,
    max: 900,
    step: 5,
    values: [0, 900],
    slide: function(event, ui) {
        var minP = $("#slider-price").slider("values", 0);
        var maxP = $("#slider-price").slider("values", 1);
        var minL = $("#slider-length").slider("values", 0);
        var maxL = $("#slider-length").slider("values", 1);
        $(this).parent().find(".amount").html(ui.values[ 0 ] + " - " + ui.values[ 1 ]);
        showProducts(minP, maxP, minL, maxL);
    }
};
    var options_length = {
    range: true,
    min: 0,
    max: 60,
    step: 1,
    values: [0, 60],
    slide: function(event, ui) {
        var minP = $("#slider-price").slider("values", 0);
        var maxP = $("#slider-price").slider("values", 1);
        var minL = $("#slider-length").slider("values", 0);
        var maxL = $("#slider-length").slider("values", 1);
        $(this).parent().find(".amount").html(ui.values[ 0 ] + " - " + ui.values[ 1 ]);
        showProducts(minP, maxP, minL, maxL);
    }
};

两个jquery滑梯游侠

2 个答案: