jquery - 同じクリックイベント2つの異なる結果？

Question

クリックイベントがあります。この例を見てみましょう。

$('p').click( function() {
    $('.xclass').css( { 'background' : 'green' } );
}); 

上記のコードは、pタグをクリックすると、divの背景色を変更します。

今、私の質問は、色を黄色に変更したい同じpタグをもう一度クリックすることです!!。これどうやってするの？。

Answer 1

var clicked_once = false;

$('p').click( function() {
    $('.xclass').css( { 'background' : 'green' } );
    if ( clicked_once ) $('.xclass').css('color', 'yellow');
    clicked_once = true;
}); 

最初のクリック後に変数を変更して、前に一度クリックしたことがあることを確認します。私はグローバル変数よりもdata（）を使用する方が好きですが、変数はそれをよりよく示しています。

Answer 2

クラスを使用してそれを行うことができますが、これはおそらくより良いアプローチです。

$('p').click(function(){
    if($(this).hasClass('green')){
        $(this).removeClass('green');
        $(this).addClass('yellow');
    } else {
        $(this).addClass('green');
    }
});

Answer 3

このような？

$('p').click( function() {
    var color = $('.xclass').css('background-color');
    if(color=='green')
        $('.xclass').css( { 'background' : 'yellow' } );
    else
        $('.xclass').css( { 'background' : 'green' } );
}); 

Answer 4

以下のようにしてみてください...

フィドル： http： //jsfiddle.net/RYh7U/95/

HTML：

<p>Click</p>
<div class="xclass">hiasg sdnhfg sdfg</div>

CSS：

.green
{
    background:green;
}
.yellow
{
    background:yellow;

}

JQuery：

    $('p').click( function() {

    if($('.xclass').hasClass("green"))
    {
      $('.xclass').removeClass("green");
      $('.xclass').addClass("yellow");
    }
    else
    {
        $('.xclass').removeClass("yellow");
        $('.xclass').addClass("green");    
    }
    });

Answer 5

これはjsFiddleでチェックして動作します...

$('p').click( function() {
    if($(".xclass").css("background-color") == "rgb(0, 128, 0)")
    {
        $('.xclass').css( { 'background-color' : 'yellow' } );
    }
    else
    {
        $('.xclass').css( { 'background-color' : 'green' } );
    }
});