瞭解點擊行爲

Question

我寫了這個簡單的代碼來理解爲什麼如果我第二次點擊「點擊我」文本，JQuery不會顯示「第二個」文本。

<div id="clickme">Click me</div> 
<div id="sometext">This is text ZERO</div> 

<script type="text/javascript"> 
    $(document).ready(function($) { 

     $("#clickme").click(function(){ 
      if (a == 1) { 
       $('#sometext').replaceWith('<div id="sometext">This is text TWO</div>'); 
      } 
      else { 
       $('#sometext').replaceWith('<div id="sometext">This is text ONE</div>'); 
       var a = 1; 
      } 
     }); 

    }); 
</script> 

我希望以下行爲：

1. 頁面加載和顯示
2. 我點擊鏈接在第一時間和JQuery顯示文本「這是文本ZERO」「這是文本ONE」
3. 我點擊鏈接第二次和jQuery顯示‘這是文本兩個’

改爲指向＃3沒有處理或者至少沒有顯示文本。爲什麼？

Answer 1

這是因爲上面提到的一個範圍問題，變量「a」必須在頁面的範圍限定，而不是點擊事件。

$(document).ready(function($) { 
    var a = 0; 

    $("#clickme").click(function() { 
     if (a == 1) { 
      $('#sometext').replaceWith('<div id="sometext">This is text TWO</div>'); 
      a = 0; 
     } 
     else { 
      $('#sometext').replaceWith('<div id="sometext">This is text ONE</div>'); 
      a = 1; 
     } 
    }); 
}); 

http://jsfiddle.net/d5xSH/

Answer 2

因爲a是在本地定義的，所以它是一個範圍問題。初始化一個全局，它會工作。見下面

$(document).ready(function($) { 
    var a = 0; 
    $("#clickme").click(function(){ 
    if (a == 1) { 
     $('#sometext').replaceWith('<div id="sometext">This is text TWO</div>'); 
    } 
    else { 
     $('#sometext').replaceWith('<div id="sometext">This is text ONE</div>'); 
     a = 1; 
    } 
    }); 
}); 

這裏是一個小提琴

http://jsfiddle.net/jfhartsock/Khp7P/1/