Comment modifier une image en un clic à l'aide de méthodes JavaScript simples ?

Comment changer l'image en cliquant à l'aide de méthodes simples

Dans ce scénario, vous souhaitez remplacer une image par une autre version de celle-ci lorsque vous cliquez sur l'élément parent. Bien que vous puissiez utiliser des frameworks JavaScript complexes comme jQuery, cette tâche peut être réalisée avec des méthodes plus simples.

Considérez la structure HTML suivante :

<li><img src="default.jpg" alt="Image 1" /></li>
<li><img src="default.jpg" alt="Image 2" /></li>
<li><img src="default.jpg" alt="Image 3" /></li>
<li><img src="default.jpg" alt="Image 4" /></li>
<li><img src="default.jpg" alt="Image 5" /></li>

Utilisation d'un attribut d'ID :

Attribuez un identifiant unique à l'image que vous souhaitez modifier :

<img src="default.jpg" alt="Image 1">

Ensuite, dans votre JavaScript, utilisez la fonction document.getElementById :

document.getElementById("image1").src = "colored.jpg";

Utilisation d'un sélecteur de classe :

Ajoutez une classe à l'image que vous souhaitez modifier :

<img src="default.jpg" alt="Image 1" class="image" />

Document.querySelectorAll renvoie tous les éléments qui correspondent à un sélecteur CSS donné.

const images = document.querySelectorAll(".image");
images.forEach((image) => {
  image.src = "colored.jpg";
});

Utilisation de la pseudo-classe active :

Lorsqu'un élément est cliqué, la pseudo-classe active lui est appliquée. Cela peut être utilisé pour modifier l'image lorsqu'un élément est cliqué :

<img src="default.jpg" alt="Image 1" />

li:active img {
  src: "colored.jpg";
}

Ces méthodes offrent des alternatives plus simples pour mettre à jour les images en cliquant, sans recourir à des frameworks JavaScript complexes.

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!