-1

私は container.slider(...) を動的に呼び出しており、初めて呼び出されたときにのみ正しい外観を取得しています。どうすれば修正できますか？

更新 - 明らかに、デモは問題を再現する簡単なハックです。問題に関連しない限り、グローバル変数などを使用しないでください。

再現 (ボタンを数回押す):

<!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

関数 setShort() と setLong() および変数を document.ready スコープからグローバルに削除してみてください。

関数と変数は、document.ready ハンドラーの実行中にのみ存在します。その匿名関数が実行された後、内部の変数と関数は存在しなくなります。変数と関数を document.ready 匿名関数の外に移動すると、それらは無期限に存在します。

于 2013-02-22T15:22:53.283 に答える