Comment puis-je facilement échanger des images en un clic sans JavaScript compliqué ?

Modification des images en cas de clic avec simplicité

Votre requête concernant la modification d'image en cas de clic met en évidence la nécessité d'une solution simple sans code JavaScript excessif. Voici une approche qui exploite HTML et JavaScript pour obtenir le résultat souhaité.

Marquage HTML :

Attribuez un identifiant unique à chaque image à l'aide de l'attribut "id" :

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

Fonction JavaScript :

Créer un JavaScript fonction pour gérer l'échange d'images au clic :

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");
  }
}

Gestion des événements :

Attachez un écouteur d'événement "onclick" à chaque image, en passant l'ID de l'image correspondante :

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

Fonctionnalité :

Lorsque vous cliquez sur un image, la fonction swapImage() est invoquée, qui vérifie l'extension de fichier actuelle de l'image. S'il s'agit de ".jpg", la fonction le remplace par ".png", modifiant ainsi l'image. S'il s'agit de ".png", la fonction inverse le processus et le remplace par ".jpg".

Cette approche exploite HTML et JavaScript pour modifier les images en un seul clic sans avoir besoin de classes CSS ou de pseudo supplémentaires. sélecteurs, fournissant une solution simple et efficace à votre requête.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!