点击第二次; jQuery的

Question

<div class="example">
 Test
</div>

$('.example').click(function(){
 $(this).css('color','red');
});

当上面的代码被点击时,它将应用.css.现在我需要的是应用另一部分代码(比方说$(this).css('color','blue');),在.example第二次点击时替换以前的代码.

我已经搜索过这个,而askers似乎只需要.show/ .hide可以替换的事件.toggle,这显然不是这里的情况.

Answer 1

由于您可能有许多类实例example,因此仅使用单个变量维护状态是不可行的,您可以做的是维护example自身内每个实例的状态:

定义两个css类

.example { background:blue }
.example.red { background:red }

然后你的点击方法:

$('.example').click(function(){
 $(this).toggleClass('red');
});

如果您不想定义新的css类,可以使用data(),以确保状态在每个类中是独占的.example,如果您有许多实例,这将非常有用.example

$('.example').click(function() {
    var color = $(this).data('color');
    if(color != 'blue') {
       $(this).css('color', 'blue');
       $(this).data('color', 'blue');
    } else {
       $(this).css('color', 'red');
       $(this).data('color', 'red');
    }
});

http://api.jquery.com/data/