jquery bricht die Farbänderung nach dem Klicken ab

In der Webentwicklung wird jQuery häufig verwendet, um einige gängige interaktive Effekte zu erzielen. Unter diesen ist das Ändern der Farbe eines Elements nach dem Klicken ein häufiger interaktiver Effekt. In einigen Fällen müssen wir jedoch die Farbänderung eines Elements beim Klicken abbrechen. In diesem Artikel wird erläutert, wie Sie mit jQuery den Verfärbungseffekt nach dem Klicken aufheben.

1. Ändern Sie die Farbe eines Elements nach dem Klicken.

Schauen wir uns zunächst an, wie Sie mit jQuery die Farbe eines Elements nach dem Klicken ändern.

Der HTML-Code lautet wie folgt:

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

Der CSS-Stil lautet wie folgt:

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

Schritt 1: Wir fügen diesem div-Element ein Klickereignis hinzu und ändern beim Klicken seine Hintergrundfarbe über jQuery.

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

Schritt 2: Wenn wir auf diese Weise auf das div-Element klicken, ändert sich seine Hintergrundfarbe in Blau.

Wie im Bild unten gezeigt:

2. Brechen Sie die Farbänderung des Elements nach dem Klicken ab.

Als nächstes stellen wir vor, wie Sie mit jQuery den Farbänderungseffekt erzielen, indem Sie das Element nach dem Klicken abbrechen.

HTML-Code und CSS-Stile sind die gleichen wie oben.

Schritt 1: Wir müssen eine Variable hinzufügen, um festzustellen, ob auf das Element geklickt wurde.

var clicked = false;

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

Schritt 2: Ändern Sie die Klickereignisfunktion. Wenn auf das Element geklickt wird, wird seine Farbe durch jQuery auf die ursprüngliche Farbe zurückgesetzt.

var clicked = false;

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

Wie im obigen Code gezeigt, wird beim Klicken auf ein Element die Hintergrundfarbe auf Blau und die angeklickte Variable auf „True“ gesetzt, sofern noch nicht darauf geklickt wurde. Wenn auf das Element geklickt wurde, setzen Sie seine Hintergrundfarbe auf Rot und die angeklickte Variable auf „false“.

Wenn wir auf das Element klicken, ändert sich seine Hintergrundfarbe von Rot zu Blau.

Wie unten gezeigt:

Wenn wir erneut auf das Element klicken, ändert sich seine Hintergrundfarbe von Blau zu Rot.

Wie im Bild unten gezeigt:

3. Zusammenfassung

Es ist sehr einfach, mit jQuery den Farbänderungseffekt von Elementen nach dem Klicken abzubrechen. Sie müssen lediglich eine Variable hinzufügen, um aufzuzeichnen, ob auf das Element geklickt wurde, und dann die Farbe des Elements über jQuery entsprechend den unterschiedlichen Werten der Variablen ändern. Dieser Effekt kann verwendet werden, um den Status eines Elements aufzuheben und so die Seite benutzerfreundlicher und intuitiver zu gestalten.

Das obige ist der detaillierte Inhalt vonjquery bricht die Farbänderung nach dem Klicken ab. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!