jquery cancels color change after click

In web development, jQuery is often used to achieve some common interactive effects. Among them, changing the color of an element after clicking is a common interactive effect. However, in some cases we need to cancel the color change of an element on click. This article will introduce how to use jQuery to cancel the discoloration effect after clicking.

1. Change the color of an element after clicking

First, let’s take a look at how to use jQuery to change the color of an element after clicking.

HTML code is as follows:

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

CSS style is as follows:

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

Step one: We add a click event to this div element. When clicked , change its background color via jQuery.

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

Step 2:In this way, when we click on the div element, its background color will change to blue.

As shown below:

2. Cancel the color change of the element after clicking

Next, we will introduce how to use jQuery Achieve canceling the color change effect of the element after clicking.

HTML code and CSS style are the same as above.

Step one: We need to add a variable to determine whether the element has been clicked.

var clicked = false;

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

Step 2: Modify the click event function. When the element is clicked, its color is restored to the initial color through jQuery.

var clicked = false;

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

As shown in the above code, when an element is clicked, if it has not been clicked before, its background color is set to blue and the clicked variable is set to true. If the element has been clicked, set its background color to red and set the clicked variable to false.

In this way, when we click on the element, its background color will change from red to blue.

As shown below:

When we click on the element again, its background color will change from blue to red.

As shown below:

3. Summary

It is very simple to use jQuery to cancel the color change effect of an element after clicking. You only need to add a variable to record whether the element has been clicked, and then change the color of the element through jQuery according to the different values ​​of the variable. This effect can be used to cancel the state of an element, making the page more user-friendly and intuitive.

The above is the detailed content of jquery cancels color change after click. For more information, please follow other related articles on the PHP Chinese website!