該變量不作爲jQuery中的全局變量工作

我將爲jquery編寫一個簡單的「滑塊插件」。我在位於文件夾「Images」中的「1.jpg」「2.jpg」和「3.jpg」的名稱中有3個圖像。我需要他們相應的顯示在div（帶ID：「滑塊」）通過點擊「下一步」按鈕。在代表「3.jpg」之後，應該再次重複該過程...該變量不作爲jQuery中的全局變量工作

以下代碼正常工作，但變量「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>

來源

2013-07-10 azita darooei

您將'Counter'作爲參數傳遞給函數，這會產生一個局部變量，所以您有兩個'Counter'變量，它們不一樣。 – adeneo

問題是你做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-10 14:33:31 epascarello

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

因此，設置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);

這樣，你限制你的計數器的範圍局部變量。這個「變量隱藏」，同時仍然保留對它的實時引用，稱爲閉包。

注意：此實現尚不理想。例如，它不允許在同一頁面上放置兩張滑動圖片。要實現這一點需要更大的複雜性，而不在原始問題的範圍內。

來源

2013-07-10 14:43:13 Andre

該變量不作爲jQuery中的全局變量工作

回答

相關問題