jquery點擊後取消變色

在網頁開發中，常常會使用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 改變元素的顏色即可。這種效果可以用於取消元素的狀態，讓頁面更友善直覺。

以上是jquery點擊後取消變色的詳細內容。更多資訊請關注PHP中文網其他相關文章！