Question

我使用了JQuery UI Range Slider，最后设法在提交表单时记录价格（使用this plugin）。但是，我发现价格没有正确保存。它总是略小或更大。这是一个错误吗？

这是我的HTML：

<div class="price-range">
    <div id="slider-range"></div>
    <label id="min-amount">0</label><label id="max-amount">2,000,000</label>
</div>

我的Jquery代码：

            var sel = $.session.get("price_min");
            var sel2 = $.session.get("price_max");

            if (sel==null){
                $.session.set("price_min", 0);

            }
            if (sel2==null){
                $.session.set("price_max", 2000000);

            }
            $( "#slider-range" ).slider({
                range: true,
                min: 0,
                max: 2000000,
                step: 1000,
                values: [ sel, sel2 ],
                slide: function( event, ui ) {

                    $( "#min-amount" ).text( ui.values[ 0 ]);
                    $( "#max-amount" ).text( ui.values[ 1 ]);
                    $.session.set("price_min", $( "#slider-range" ).slider( "values", 0 ));
                    $.session.set("price_max", $( "#slider-range" ).slider( "values", 1 ));
                }
            });

            $( "#min-amount" ).text( sel);
            $( "#max-amount" ).text( sel2);

滑块工作正常。就在我选择min：238000 / max：1556000时，在提交表单后它变为min：238000 / max：1562000。这是一个错误吗？

Answer 1

您的代码尝试的问题很少

jQuery(function () {
    var sel = $.session.get("price_min");
    var sel2 = $.session.get("price_max");

    if (sel == null) {
        //if value is null initialize with default values
        sel = 0;
        $.session.set("price_min", sel);
    }
    if (sel2 == null) {
        sel2 = 2000000;
        $.session.set("price_max", sel2);

    }

    $("#slider-range").slider({
        range: true,
        min: 0,
        max: 2000000,
        step: 1000,
        values: [sel, sel2],
        slide: function (event, ui) {
            $("#min-amount").text(ui.values[0]);
            $("#max-amount").text(ui.values[1]);
        },
        //use stop event to set the session values
        stop: function (event, ui) {
            //use ui.values to access the value, you were using the setter method
            $.session.set("price_min", ui.values[0]);
            $.session.set("price_max", ui.values[1]);
        }
    });

    $("#min-amount").text(sel);
    $("#max-amount").text(sel2);
})

演示：Fiddle

JQuery UI Range滑块未正确保存 - 错误

1 个答案: