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() {
    var color = $('.xclass').css('background-color');
    if(color=='green')
        $('.xclass').css( { 'background' : 'yellow' } );
    else
        $('.xclass').css( { 'background' : 'green' } );
});

Answer 3

你可以通过使用类来实现，这可能是一种更好的方法。

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

同样的事件两个不同的结果？

5 个答案: