jQuery UI从滑块获取价值

Question

我的页面中有两个滑块：一个带有句点，另一个带有数量。 我想每次更改滑块时获取它们的值，并且这些值将在另一个函数中使用。 这是我的代码

对于期间滑块

        $(function() {
        $( "#slider-period" ).slider({
            range   : "max",
            min : 3,
            max : 12,
            value   : 4,
            slide   : function (event,ui) {
                $(".period").html(ui.value+" years");

            },
            change  : function (event,ui) {
                $(".period").html(ui.value+" years");

            }

        });
    });

对于数量滑块：

        $(function() {
        $( "#slider-amount" ).slider({
            range   : "max",
            min : 500,
            max : 150000,
            step    : 1000,
            value   : 1200,
            slide   : function (event,ui) {
                $("#amount").html(ui.value+" RON");
            },
            change  : function (event,ui) {
                $("#amount").html(ui.value+" RON");
            }


        });

     });

我想使两个全局变量在每次更改滑块时都实现。 任何想法？

Answer 1

尝试制作一个在每次更新时都会调用的全局函数。

function sliderUpdated() {
    var periodVal = $( "#slider-period" ).slider("option", "value");
    var amountVal = $( "#slider-amount" ).slider("option", "value");

    //dostuff
}

对于期间滑块

    $(function() {
    $( "#slider-period" ).slider({
        range   : "max",
        min : 3,
        max : 12,
        value   : 4,
        slide   : function (event,ui) {
            $(".period").html(ui.value+" years");

        },
        change  : function () {
            sliderUpdated();

        }

    });
});

对于数量滑块：

    $(function() {
    $( "#slider-amount" ).slider({
        range   : "max",
        min : 500,
        max : 150000,
        step    : 1000,
        value   : 1200,
        slide   : function (event,ui) {
            $("#amount").html(ui.value+" RON");
        },
        change  : function () {
            sliderUpdated();
        }


    });

 });

Answer 2

您可以在脚本顶部创建两个变量，然后通过jquery滑块的change方法更新它们。 例如

    var years;
    var amount;

    $(function() {
        $( "#slider-period" ).slider({
            range   : "max",
            min : 3,
            max : 12,
            value   : 4,
            slide   : function (event,ui) {
                $(".period").html(ui.value+" years");

            },
            change  : function (event,ui) {
                $(".period").html(ui.value+" years");
                years = ui.value;
            }

        });
    });

 $(function() {
        $( "#slider-amount" ).slider({
            range   : "max",
            min : 500,
            max : 150000,
            step    : 1000,
            value   : 1200,
            slide   : function (event,ui) {
                $("#amount").html(ui.value+" RON");
            },
            change  : function (event,ui) {
                $("#amount").html(ui.value+" RON");
                amount = ui.value;
            }
        });
     });