javascript - 第二次点击时； jQuery

Question

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

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

当点击上面的代码时，它将应用.css。现在我需要的是应用另一段代码(假设 $(this).css('color','blue');)，在 时替换之前的代码。示例被第二次点击。

我已经搜索过这个，提问者似乎只需要 .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/