Question

我希望每次点击都会在课程中显示一些文字，但保留clicky-class。很快，如果你点击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

使用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;
    }
});

Answer 2

这对你有帮助吗？我使用JQuery data（）而不是全局变量。所以这将有助于你拥有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>

单击x次后如何显示不同的文本？

2 个答案: