x-times를 클릭 한 후에 다른 텍스트를 표시하려면 어떻게합니까?

Question

각 클릭에 대해 클래스 내에 텍스트를 표시하고 싶지만 clicky 클래스를 유지하고 싶습니다. 두 번 클릭하면 곧 "두 번 클릭했습니다"라는 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

에 대한

Fiddle이 도움말을합니까. 전역 변수 대신 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 문을 사용하십시오. 참고로, 요소에는 클래스 속성 만 있기 때문에 선택기는 여러 요소와 일치 할 수 있습니다. 명심할 것. 테스트

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; 
    } 
});​