如何讓不同的文字在點擊x次後出現？

Question

我想在每個點擊類中顯示一些文本，但保持點擊類。不久，如果你點擊2次，你會得到一個div文本「你點擊了兩次」，你仍然可以點擊第三次，然後你會得到「你點擊了三次」，直到第五次當所有東西會隱藏。有沒有什麼simpel的方式來做到這一點？我嘗試過這個，但無法讓它工作。

var clicks = 0; 
$('.clicky').on('click', function() 
    { 
    clicks++; 
     if(clicks >= 3) 
     { 
     $(this).add($('.background')).add($('.hello')); 
     } 

     else(clicks >= 5) 
     { 
     $(this).add($('.background')).hide(); 
     } 
     });​ 

http://jsfiddle.net/sLAzY/ 這是隱藏功能的工作示例。

希望你明白我的意思
祝你有美好的一天！

Answer 1

這是否幫助你。我使用JQuery數據（）而不是全局變量。所以這會幫助你有多個Clicky類的元素。

<div class="clicky"> 
    aaaa 
</div> 
<div class="clicky"> 
    bbbb 
</div> 
<script type="text/javascript" src="jquery.js" ></script> 
<script type="text/javascript"> 
$('.clicky').data('times', 0); 
$('.clicky').on('click', function(){ 
    var times = parseInt($(this).data('times')) + 1; 
    $(this).data('times', times); 
    if(times >= 3 && times<5) 
     $(this).addClass('background').addClass('hello'); 
    else if (times >= 5){ 
     $(this).hide('fast'); 
    } 
}); 
</script> 

Answer 2

使用switch語句。請注意，因爲您的元素只有類屬性，所以選擇器可以匹配多個元素。只是要記住。

Fiddle測試

var clicks = 0; 
$('.clicky').on('click', function(){ 
    var string; 
    clicks++; 
    switch(clicks){ 
    case 1: 
     string = "You clicked one time"; 
     $('.clicky').text(string); 
     break; 
    case 2: 
     string = "You clicked two times"; 
     $('.clicky').text(string); 
     break; 
    case 3: 
     string = "You clicked three times"; 
     $('.clicky').text(string); 
     break; 
    case 4: 
     string = "You clicked four times"; 
     $('.clicky').text(string); 
     break; 
    case 5: 
     $(this).add($(".background")).hide(); 
     break; 
    } 
});​