Comment modifier les images en un clic sans JavaScript étendu ?

Changer les images lors d'un clic : une approche simple

Lorsque nous sommes confrontés à la tâche d'échanger dynamiquement des images lors d'événements de clic, on peut dans un premier temps recourir à JavaScript ou jQuery pour une solution rapide. Cependant, pour des scénarios plus simples, il existe une alternative qui évite d'avoir recours à un code JavaScript étendu.

Pour modifier facilement les images, pensez à ajouter des identifiants uniques aux éléments de votre image, comme indiqué ci-dessous :

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

Ensuite, créez une fonction JavaScript simple pour gérer l'échange d'images au clic :

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

Dans cette fonction, la source actuelle de l'image est récupérée et remplacée par une nouvelle source qui inclut "_colored" dans son nom.

Enfin, ajoutez l'écouteur d'événement onclick à chaque image pour appeler la fonction changeImage() lorsque vous cliquez dessus :

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

Avec cette approche, les images peuvent être échangées de manière transparente au clic sans le besoin de JavaScript complexe ou de pseudo-sélecteurs.

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!