在网页开发中，经常会使用jQuery来实现一些常见的交互效果。其中，点击后改变元素的颜色是一种常见的交互效果。但是，在某些情况下，我们需要点击后取消元素的颜色变化。本篇文章将介绍如何使用jQuery实现点击后取消变色的效果。

一、点击后改变元素的颜色

首先，让我们看一下如何使用jQuery来实现点击后改变元素的颜色。

HTML代码如下：

<div class="box">点击我变色</div>

登录后复制

CSS样式如下：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  color: white;
  text-align: center;
  line-height: 100px;
  cursor: pointer;
}

登录后复制

第一步：我们给这个 div 元素添加一个点击事件，当点击时，通过 jQuery 改变其背景色。

$('.box').click(function() {
  $(this).css('background-color', 'blue');
});

登录后复制

第二步：这样，当我们点击 div 元素时，其背景色就会变为蓝色。

如下图所示：

二、点击后取消元素的颜色变化

接下来，我们将介绍如何使用 jQuery 实现点击后取消元素的颜色变化效果。

HTML代码和CSS样式同上。

第一步：我们需要添加一个变量，用于判断元素是否被点击过。

var clicked = false;

$('.box').click(function() {
  if(!clicked) {
    $(this).css('background-color', 'blue');
    clicked = true;
  }
});

登录后复制

第二步：修改点击事件函数，当元素被点击过时，通过 jQuery 将其颜色恢复为初始颜色。

var clicked = false;

$('.box').click(function() {
  if(!clicked) {
    $(this).css('background-color', 'blue');
    clicked = true;
  } else {
    $(this).css('background-color', 'red');
    clicked = false;
  }
});

登录后复制

如上代码所示，当点击元素后，如果之前没有被点击过，就将其背景色设置为蓝色，并将 clicked 变量设为 true。如果元素已经被点击过，就将其背景色设置为红色，并将 clicked 变量设为 false。

这样，当我们点击元素时，其背景色会从红色变为蓝色。

如下图所示：

当我们再次点击元素时，其背景色会从蓝色变为红色。

如下图所示：

三、总结

使用 jQuery 实现点击后取消元素的颜色变化效果非常简单。只需要添加一个变量来记录元素是否被点击过，然后根据变量的不同值，通过 jQuery 改变元素的颜色即可。这种效果可以用于取消元素的状态，让页面更加友好和直观。

【文章原创作者：高防cdn http://www.558idc.com/gfcdn.html提供，感恩】