jquery annule le changement de couleur après un clic

Dans le développement Web, jQuery est souvent utilisé pour obtenir certains effets interactifs courants. Parmi eux, changer la couleur d’un élément après avoir cliqué est un effet interactif courant. Cependant, dans certains cas, nous devons annuler le changement de couleur d'un élément au clic. Cet article explique comment utiliser jQuery pour annuler l'effet de décoloration après avoir cliqué.

1. Changer la couleur d'un élément après avoir cliqué

Tout d'abord, voyons comment utiliser jQuery pour changer la couleur d'un élément après avoir cliqué.

Le code HTML est le suivant :

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

Le style CSS est le suivant :

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

Première étape : Nous donnez ce div Ajoutez un événement de clic à l'élément et, lorsque vous cliquez dessus, changez sa couleur d'arrière-plan via jQuery.

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

Étape 2 : De cette façon, lorsque nous cliquons sur l'élément div, sa couleur d'arrière-plan passera au bleu.

Comme indiqué ci-dessous :

2. Annulez le changement de couleur de l'élément après avoir cliqué

Première étape : Nous devons ajouter une variable pour déterminer si l'élément a été cliqué.

var clicked = false;

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

Étape 2 : Modifier la fonction d'événement de clic Lorsque l'on clique sur l'élément, sa couleur est restaurée à la couleur initiale via jQuery.

var clicked = false;

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!