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é

#🎜🎜 # Ensuite, nous présenterons comment utiliser jQuery pour annuler l'effet de changement de couleur des éléments après avoir cliqué.

Le code HTML et les styles CSS sont les mêmes que ci-dessus.

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;
  }
});

Comme le montre le code ci-dessus, lorsqu'un élément est cliqué, s'il n'a pas été cliqué auparavant, sa couleur d'arrière-plan est définie sur bleu et la variable cliquée est définie sur true. Si l'élément a été cliqué, définissez sa couleur d'arrière-plan sur rouge et définissez la variable cliquée sur false.

De cette façon, lorsque l'on clique sur l'élément, sa couleur de fond passera du rouge au bleu.

Comme indiqué ci-dessous :

Lorsque nous cliquons à nouveau sur l'élément, sa couleur d'arrière-plan passe du bleu au rouge.

Comme indiqué ci-dessous :

3. Résumé

Utilisez jQuery pour annuler après avoir cliqué sur Le L'effet de changement de couleur des éléments est très simple. Il vous suffit d'ajouter une variable pour enregistrer si l'élément a été cliqué, puis de changer la couleur de l'élément via jQuery en fonction des différentes valeurs de la variable. Cet effet peut être utilisé pour annuler l'état d'un élément, rendant la page plus conviviale et intuitive.

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!