Comment changer les images dans jquery

Dans le développement front-end, il est souvent nécessaire de modifier dynamiquement les images sur la page en fonction de différents états ou événements. À ce stade, jQuery doit être utilisé pour terminer le changement d'image.

Ce qui suit présentera deux méthodes de changement d'image jQuery couramment utilisées.

1. Changez d'image en ajoutant des classes CSS

Cette méthode consiste à changer d'image en ajoutant ou en supprimant des classes CSS sur les images.

Code HTML :

<img id="myImage" src="image1.jpg" alt="MyImage">
<button id="changeImage">Change Image</button>

Code JavaScript :

$(document).ready(function(){
  $("#changeImage").click(function(){
    $("#myImage").toggleClass("image2");
    if($("#myImage").hasClass("image2")){
      $("#myImage").attr("src", "image2.jpg");
    }else{
      $("#myImage").attr("src", "image1.jpg");
    }
  });
});

Code CSS :

.image2 {
  content: url(image2.jpg);
}

Nous définissons une image et un bouton dans le code HTML Lorsque le bouton est cliqué, le code JavaScript sera déclenché en ajoutant ou en supprimant le CSS. sur la classe image pour changer l’adresse source de l’image. Parallèlement, nous avons défini la classe .image2 dans le fichier CSS afin que l'adresse source de l'image puisse être modifiée dynamiquement. .image2 类，使得图片的源地址可以被动态更改。

二、通过 jQuery 的 attr() 方法切换图片

这种方法是直接通过 jQuery 的 attr() 方法来更改图片的源地址。

HTML 代码：

<img id="myImage" src="image1.jpg" alt="MyImage">
<button id="changeImage">Change Image</button>

JavaScript 代码：

$(document).ready(function(){
  $("#changeImage").click(function(){
    var imgSrc = $("#myImage").attr("src");
    if(imgSrc == "image1.jpg"){
      $("#myImage").attr("src", "image2.jpg");
    }else{
      $("#myImage").attr("src", "image1.jpg");
    }
  });
});

我们在 HTML 代码中同样定义了一个图片和一个按钮，点击按钮后会触发 JavaScript 代码，通过 attr()

2. Changez d'image via la méthode attr() de jQuery

Cette méthode consiste à modifier directement l'adresse source de l'image via la méthode attr() de jQuery.

Code HTML : 🎜rrreee🎜Code JavaScript : 🎜rrreee🎜Nous définissons également une image et un bouton dans le code HTML Lorsque vous cliquez sur le bouton, le code JavaScript sera déclenché, qui peut être modifié via le attr. () L'adresse source de l'image pour réaliser la commutation d'image. 🎜🎜Résumé🎜🎜Ci-dessus sont deux méthodes de changement d'image jQuery couramment utilisées. La commutation dynamique des images peut être obtenue en ajoutant ou en supprimant des classes CSS et en modifiant directement l'adresse source de l'image. Nous pouvons choisir différentes méthodes pour obtenir l'effet de commutation d'image en fonction de besoins spécifiques. 🎜

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!