Wie kann ich Bilder ohne kompliziertes JavaScript einfach per Klick austauschen?

Bilder per Klick einfach ändern

Ihre Anfrage zur Bildänderung per Klick unterstreicht die Notwendigkeit einer unkomplizierten Lösung ohne übermäßigen JavaScript-Code. Hier ist ein Ansatz, der HTML und JavaScript nutzt, um das gewünschte Ergebnis zu erzielen.

HTML-Markup:

Weisen Sie jedem Bild mithilfe des „id“-Attributs eine eindeutige Kennung zu:

<pre class="brush:php;toolbar:false">
<li><img alt="" src="image1.jpg">

JavaScript-Funktion:

Erstellen Sie ein JavaScript Funktion zur Handhabung des Bildaustauschs beim Klicken:

function swapImage(imageId) {
  var image = document.getElementById(imageId);
  if (image.src.endsWith(".jpg")) {
    image.src = image.src.replace(".jpg", ".png");
  } else {
    image.src = image.src.replace(".png", ".jpg");
  }
}

Ereignisbehandlung:

Fügen Sie jedem Bild einen „onclick“-Ereignis-Listener hinzu und übergeben Sie die entsprechende Bild-ID:

<pre class="brush:php;toolbar:false">
<li><img alt="" src="image1.jpg">

Funktionalität:

Wenn Sie auf ein klicken Bild wird die Funktion swapImage() aufgerufen, die die aktuelle Dateierweiterung des Bildes überprüft. Wenn es „.jpg“ ist, ersetzt die Funktion es durch „.png“, wodurch das Bild effektiv geändert wird. Wenn es sich um „.png“ handelt, kehrt die Funktion den Vorgang um und ändert es wieder in „.jpg“.

Dieser Ansatz nutzt HTML und JavaScript, um Bilder mit einem einzigen Klick zu ändern, ohne dass zusätzliche CSS-Klassen oder Pseudo-Klassen erforderlich sind Selektoren, die eine einfache und effiziente Lösung für Ihre Anfrage bieten.

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