jquery - 相同的点击事件两个不同的结果？

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

Like this?

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

Answer 3

试试下面...

小提琴：http: //jsfiddle.net/RYh7U/95/

HTML：

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

CSS：

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

}

查询：

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

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

Answer 4

您可以通过使用类来做到这一点，这可能是一种更好的方法。

$('p').click(function(){
    if($(this).hasClass('green')){
        $(this).removeClass('green');
        $(this).addClass('yellow');
    } else {
        $(this).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' } );
    }
});