0

クリックごとにクラス内にいくつかのテキストを表示したいが、クリッククラスは保持したい。すぐに、2 回クリックすると、「You clicked two times」という div-text が表示されます。3 回目は引き続きクリックできます。その後、「You clicked three times」が表示されます。隠れます。これを行う簡単な方法はありますか？私はこれを試しましたが、動作させることができませんでした。

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/ これは非表示機能の動作例です。

私
の言いたいことを理解していただければ幸いです。よい一日を！

4

2 に答える 2

1

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;
    }
});​
于 2012-12-02T10:50:14.853 に答える
1

これはあなたを助けますか？グローバル変数の代わりにJQuerydata（）を使用しました。したがって、これはクリッククラスの複数の要素を持つのに役立ちます。

<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>
于 2012-12-02T10:59:57.460 に答える