jquery klickt auf ein untergeordnetes Element, um einen Stil hinzuzufügen

So verwenden Sie jQuery, um auf untergeordnete Elemente zu klicken und Stile hinzuzufügen.

jQuery ist eine beliebte JavaScript-Bibliothek, die es ermöglicht, JavaScript-Code auf eine Weise zu schreiben, die die Einfachheit und Lesbarkeit des Codes verbessert. jQuery verfügt über eine Reihe praktischer DOM-Manipulationsfunktionen, die die Manipulation von Elementen auf der Seite erleichtern. In diesem Artikel zeige ich Ihnen, wie Sie mit jQuery auf untergeordnete Elemente klicken und Stile hinzufügen.

Schritt 1: jQuery einführen

Fügen Sie die jQuery-Bibliothek zu Ihrer HTML-Datei hinzu. Sie können es von der offiziellen Website herunterladen oder in Ihrer HTML-Datei direkt eine Verbindung zum CDN von jQuery herstellen. Hier ist ein CDN als Beispiel:

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Schritt 2: HTML- und CSS-Code schreiben

Bereiten Sie eine HTML-Seite mit mehreren Unterelementen vor, auf die geklickt wird. Legen Sie gleichzeitig den Stil in CSS fest, um die Stiländerungen nach dem Klicken zu erkennen. Zum Beispiel:

<div id="parent">
  <div class="child">子元素1</div>
  <div class="child">子元素2</div>
  <div class="child">子元素3</div>
</div>

.child {
  padding: 10px;
  border: 1px solid black;
  cursor: pointer;
}

.clicked {
  background-color: yellow;
}

Hier legen wir drei untergeordnete Elemente fest, die ihre Hintergrundfarbe ändern, wenn sie angeklickt werden.

Schritt 3: JQuery-Code schreiben

Wir müssen Code schreiben, um zu verarbeiten, was passiert, wenn auf das untergeordnete Element geklickt wird. Zuerst müssen wir alle untergeordneten Elemente auswählen. Mit der untergeordneten Elementauswahl von jQuery können wir ganz einfach alle untergeordneten Elemente unter dem übergeordneten Element auswählen:

var children = $('#parent > .child');

Als nächstes müssen wir Klickereignis-Listener für jedes untergeordnete Element hinzufügen. Wir können dies mit der Funktion every() von jQuery tun. Diese Funktion akzeptiert eine Rückruffunktion, die auf jedes Element angewendet wird. In dieser Rückruffunktion fügen wir einen Klickereignis-Listener hinzu, um den Stil des untergeordneten Elements zu verbessern:

children.each(function() {
  $(this).on('click', function() {
    $(this).addClass('clicked');
  });
});

Hier verwenden wir die on()-Funktion von jQuery, um einen Klickereignis-Listener hinzuzufügen. Diese Funktion akzeptiert zwei Parameter. Der erste ist der Ereignistyp, wir haben „Klick“ verwendet. Der zweite Parameter ist die Callback-Funktion, die ausgeführt wird, wenn auf den Klick reagiert wird. In dieser Rückruffunktion rufen wir die Funktion addClass() für das untergeordnete Element auf, um die „angeklickte“ Klasse zum untergeordneten Element hinzuzufügen. Wir definieren eine „angeklickte“ Klasse, die die Hintergrundfarbe von untergeordneten Elementen ändert.

Der vollständige jQuery-Code lautet wie folgt:

$(document).ready(function() {

  var children = $('#parent > .child');

  children.each(function() {
    $(this).on('click', function() {
      $(this).addClass('clicked');
    });
  });

});

Schließlich fügen wir den gesamten Code in die Funktion $(document).ready() ein, nachdem das DOM vollständig geladen ist . Führen Sie sie aus.

Fazit

In diesem Artikel haben wir gelernt, wie man mit jQuery auf untergeordnete Elemente klickt und Stile hinzufügt. Wir müssen alle untergeordneten Elemente auswählen und dann für jedes untergeordnete Element einen Klickereignis-Listener hinzufügen. In der Rückruffunktion können wir die Funktion addClass() verwenden, um dem untergeordneten Element eine Klasse hinzuzufügen, sodass wir unseren untergeordneten Elementen verschiedene Stile hinzufügen können. Wenn Sie weitere Attribute untergeordneter Elemente hinzufügen möchten, können Sie auch Click-Event-Listener erlernen und üben.

Das obige ist der detaillierte Inhalt vonjquery klickt auf ein untergeordnetes Element, um einen Stil hinzuzufügen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!