該變量不能作為jquery中的全局變量

Question

我將為jquery寫一個簡單的“滑塊插件”。 我有3張圖片，名為“1.jpg”“2.jpg”和“3.jpg”，位於文件夾“Images”中。 我需要它們相應地通過單擊“下一步”按鈕顯示在div（帶有id：“slider”）中。 在表示“3.jpg”之后，該過程應該再次重復......

以下代碼工作正常，但變量“Counter”不能作為全局變量。 我的意思是在顯示“3.jpg”后它應該等於1（顯示“1.jpg”），但它仍然會增加並變為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>

Answer 1

問題是你使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方法可以讀取它。

Answer 2

命名參數Counter時，將隱藏全局計數器。

因此，設置Counter = 1 ，您只更改局部變量值。 您可以更改為： $.fn.ChangePic = function () { （無參數），對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);

這樣，您可以將計數器的范圍限制為局部變量。 這個'變量隱藏'同時仍然保持對它的實時引用稱為閉包。

注意：此實現尚不理想。 例如，它不允許在同一頁面中有兩張滑動圖片。 實現這一點需要更大的復雜性，而不是原始問題的范圍。

該變量不能作為jquery中的全局變量

問題描述

2 個解決方案

解決方案1
2 已采納 2013-07-10 14:33:31

解決方案2
0 2013-07-10 14:43:13

該變量不能作為jquery中的全局變量

問題描述

2 個解決方案

解決方案1 2 已采納 2013-07-10 14:33:31

解決方案2 0 2013-07-10 14:43:13

解決方案1
2 已采納 2013-07-10 14:33:31

解決方案2
0 2013-07-10 14:43:13