Как сделать разные тексты, чтобы они появлялись после нажатия x-раз?

Question

Я хочу показывать некоторый текст в классе для каждого клика, но оставляю класс клика. Вскоре, если вы нажмете 2 раза, вы получите div-текст "Вы нажали два раза", вы все равно сможете нажать третий раз, затем вы получите "Вы нажали три раза", до пятого раза, когда все будет прятаться Есть ли простой способ сделать это? Я пытался с этим, но не мог заставить его работать.

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. Обратите внимание, поскольку ваши элементы имеют только атрибуты класса, селекторы могут соответствовать нескольким элементам. Просто что-то иметь в виду.

Скрипка для тестирования

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