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

Jquery UI从滑块获取值

2 个答案: