Heim > Web-Frontend > CSS-Tutorial > Wie ändere ich Bilder per Klick ohne umfangreiches JavaScript?

Wie ändere ich Bilder per Klick ohne umfangreiches JavaScript?

Barbara Streisand
Freigeben: 2024-11-17 15:53:02
Original
612 Leute haben es durchsucht

How to Change Images on Click Without Extensive 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">
Nach dem Login kopieren
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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">
Nach dem Login kopieren
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage