Wie ändere ich ein Bild per Klick mit einfachen JavaScript-Methoden?

So ändern Sie das Bild beim Klicken mit einfachen Methoden

In diesem Szenario möchten Sie beim Klicken ein Bild durch eine andere Version davon ersetzen auf dem übergeordneten Element. Während Sie komplexe JavaScript-Frameworks wie jQuery verwenden könnten, kann diese Aufgabe mit einfacheren Methoden gelöst werden.

Bedenken Sie die folgende HTML-Struktur:

<li><img src="default.jpg" alt="Image 1" /></li>
<li><img src="default.jpg" alt="Image 2" /></li>
<li><img src="default.jpg" alt="Image 3" /></li>
<li><img src="default.jpg" alt="Image 4" /></li>
<li><img src="default.jpg" alt="Image 5" /></li>

Verwendung eines ID-Attributs:

Weisen Sie dem gewünschten Bild eine eindeutige ID zu ändern:

<img src="default.jpg" alt="Image 1">

Verwenden Sie dann in Ihrem JavaScript die Funktion document.getElementById:

document.getElementById("image1").src = "colored.jpg";

Verwenden eines Klassenselektors:

Fügen Sie dem Bild, das Sie ändern möchten, eine Klasse hinzu:

<img src="default.jpg" alt="Image 1" class="image" />

Document.querySelectorAll gibt zurück alle Elemente, die einem bestimmten CSS-Selektor entsprechen.

const images = document.querySelectorAll(".image");
images.forEach((image) => {
  image.src = "colored.jpg";
});

Verwendung der aktiven Pseudoklasse:

Wenn auf ein Element geklickt wird, wird die aktive Pseudoklasse angewendet dazu. Dies kann genutzt werden, um das Bild zu ändern, wenn auf ein Element geklickt wird:

<img src="default.jpg" alt="Image 1" />

li:active img {
  src: "colored.jpg";
}

Diese Methoden bieten einfachere Alternativen zum Aktualisieren von Bildern beim Klicken, ohne auf komplexe JavaScript-Frameworks angewiesen zu sein.

Das obige ist der detaillierte Inhalt vonWie ändere ich ein Bild per Klick mit einfachen JavaScript-Methoden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!