Wie ändere ich Bilder per Klick ohne umfangreiches JavaScript?

Bilder bei Klick ändern: Ein einfacher Ansatz

Wenn man vor der Aufgabe steht, Bilder bei Klickereignissen dynamisch auszutauschen, kann man zunächst darauf zurückgreifen JavaScript oder jQuery für eine schnelle Lösung. Für einfachere Szenarien gibt es jedoch eine Alternative, die den Bedarf an umfangreichem JavaScript-Code vermeidet.

Um Bilder einfacher zu ändern, sollten Sie erwägen, eindeutige IDs zu Ihren Bildelementen hinzuzufügen, wie unten gezeigt:

<ul>
  <li><img src="image1.png">

Als nächstes erstellen Sie eine einfache JavaScript-Funktion, um den Bildaustausch beim Klicken zu handhaben:

function changeImage(image) {
  // Get the current image source
  let currentSrc = image.src;

  // Replace the source with the new image
  const newSrc = currentSrc.replace(".png", "_colored.png");
  image.src = newSrc;
}

In dieser Funktion wird die aktuelle Bildquelle abgerufen und durch ersetzt eine neue Quelle, deren Name „_colored“ enthält.

Fügen Sie abschließend den Onclick-Ereignis-Listener zu jedem Bild hinzu, um beim Klicken die Funktion „changeImage()“ aufzurufen:

<ul>
  <li><img src="image1.png">

Mit diesem Ansatz , Bilder können per Klick nahtlos ausgetauscht werden, ohne dass komplexes JavaScript oder Pseudo-Selektoren erforderlich sind.

Das obige ist der detaillierte Inhalt vonWie ändere ich Bilder per Klick ohne umfangreiches JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!