两个jquery幻灯片护林员

Two jquery slide ranger

本文关键字：护林员 幻灯片 jquery 两个      更新时间：2024-06-24

我的第一个问题！我一直在寻找实现这一功能的可能方法，但找不到任何帮助我的方法。。

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

前任。搜索从123$-900$

质量也是如此。

我还试图让每个滑块都有不同的最小值和最大值，这可能吗？

$(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);
    }
};

需要2个函数。每个滑块的onChange事件一个。在每次执行onChange功能之后，应该基于计算结果更新每个滑块的min和max值。showProducts()将以其当前形式工作。

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

我就是这样解决的！

小提琴在这里找到：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);
    }
};
相关文章：