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