0

jquery 用の単純な「スライダー プラグイン」を作成します。「Images」フォルダに「1.jpg」「2.jpg」「3.jpg」という名前の3つの画像があります。「次へ」ボタンをクリックして、それらをdiv（id：「slider」）に表示する必要があります。「3.jpg」を表した後、プロセスをもう一度繰り返す必要があります...

次のコードは問題なく動作しますが、変数 "Counter" はグローバル変数として機能しません。「3.jpg」を表示した後は（「1.jpg」を表示するには）1に等しいはずですが、それでも増加して4,5になります....この問題の解決を手伝ってください。

<head>
    <title></title>
    <script src="Scripts/jquery-1.7.1.js"></script>
    <script type="text/javascript">
        var Counter = 1;
        (function ($) {
            $.fn.ChangePic = function (Counter) {
                MAX_numberOF_Images=3;
                if (Counter > MAX_numberOF_Images) {
                    Counter = 1;
                }

                this.css("background-image", "url(" + 'Images/' + Counter + '.jpg' + ")");
            }

        })(jQuery);

        $(document).ready(function () {
            $("#slider").css("background-image", "url(Images/1.jpg)");


            $("#Next").click(function () {
                Counter++;
                alert(Counter);
                $("#slider").ChangePic(Counter);
            });

        });
    </script>
</head>
<body>
    <div id="slider" style="width:200px;height:100px;border:1px solid black"></div>
    <input type="button" id="Next" value="Next"/>
</body>
4

2 に答える 2

2

問題はCounter、新しいローカル変数を作成したことです。値によって渡される型を使用しているため、グローバル変数は変更されません。

 $.fn.ChangePic = function (Counter) {  <-- Declaring Counter here makes it a local variable
     MAX_numberOF_Images=3;
     if (Counter > MAX_numberOF_Images) {
         Counter = 1;  <-- setting local variable, not global
     }    
     this.css("background-image", "url(" + 'Images/' + Counter + '.jpg' + ")");
 }

修正は、カウンターを渡さないことです。これはグローバルであるため、メソッドChangePicはそれを読み取ることができます。

于 2013-07-10T14:33:31.147 に答える
0

パラメータに Counter という名前を付けると、グローバル Counter が非表示になります。

したがって、を設定するCounter = 1と、ローカル変数の値のみが変更されます。(パラメータなし)に変更するだけ$.fn.ChangePic = function () {で、Counter への内部参照はグローバル Counter を指します。

ただし、これを行うためにグローバル変数は必要ありません。

(function ($) {
    var counter = 1;
    var maxNumberOfImages = 3;
    $.fn.ChangePic = function () {
        if (counter > maxNumberOfImages) {
            counter = 1;
        }

        this.css("background-image", "url(" + 'Images/' + counter + '.jpg' + ")");
        counter++;
    }
})(jQuery);

このようにして、カウンターのスコープをローカル変数に制限します。この「変数の隠蔽」は、それへのライブ参照を保持しながらクロージャーと呼ばれます。

注:この実装はまだ理想的ではありません。たとえば、同じページに 2 つのスライド画像を配置することはできません。これを実装するには、元の質問の範囲外の複雑さが必要になります。

于 2013-07-10T14:43:13.297 に答える