-1

我正在动态调用 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>
4

2 回答 2

1

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

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

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

小提琴

于 2013-02-22T15:44:57.090 回答
-1

尝试从 document.ready 范围中删除函数 setShort() 和 setLong() 以及变量并进入全局。

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

于 2013-02-22T15:22:53.283 回答