Question

我正在动态调用container.slider（...），并且只在第一次调用时才获得正确的外观。我该如何解决？

更新 - 很明显，演示是一个快速黑客再现问题，让我们不要选择使用全球变量等，除非它与问题有关。

Repro（按几次按钮）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html style="height: 100%;">
<head>
    <title></title>
    <link href="styles/themes/ui-lightness/jquery-ui-1.9.0.custom.min.css" rel="stylesheet"
        type="text/css" />
    <script src="scripts/external/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="scripts/external/jquery-ui-1.9.0.custom.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {
            //
            var longValues = [10, 50, 90];
            var shortValues = [50];
            var mode;

            function setLong() {
                $("#c").slider({ orientation: "horizontal", range: false, values: longValues, min: 0, max: 100, step: 1 });
                mode = "long";
            }

            function setShort() {
                $("#c").slider({ orientation: "horizontal", range: false, values: shortValues, min: 0, max: 100, step: 1 });
                mode = "short";
            }


            $("#t").on("click", function () {


                if (mode == "long") {
                    console.log("set short");
                    setShort();

                }
                else {
                    console.log("set long");
                    setLong();
                }
            });

            setLong();

        });
    </script> 
</head>
<body style="height: 100%;">

   <div id="c" style="width: 200px; vertical-align: middle;">
   </div>

   <button id="t">Toggle
   </button>
</body>
</html>

Answer 1

当更改手柄的数量时，似乎没有移除旧手柄，并且要“重置”滑块，您可能必须先将其销毁：

function setLong() {
    $("#c").slider( "destroy" );
    $("#c").slider({ orientation: "horizontal", 
                           range: false, 
                          values: longValues, 
                             min: 0, 
                             max: 100, 
                            step: 1 
    });
    mode = "long";
}

这似乎有效，但是可能存在像这样破坏和初始化滑块的问题，并且它没有经过适当的测试或其他任何事情。

FIDDLE

Answer 2

尝试从document.ready范围中删除函数setShort（）和setLong（）以及变量到全局。

函数和变量仅在document.ready处理程序执行期间存在。在执行匿名函数之后，内部的任何变量和函数都将不复存在。通过将变量和函数移到document.ready匿名函数之外，它们将无限期地存在。

当动态调用时，JQuery Slider不会正确更新其值

2 个答案: