How to change images in jquery

In front-end development, it is often necessary to dynamically change the pictures on the page according to different states or events. At this time, jQuery needs to be used to complete the picture switching.

The following will introduce two commonly used jQuery image switching methods.

1. Switch pictures by adding CSS classes

This method is to switch pictures by adding or removing CSS classes on pictures.

HTML code:

<img src="/static/imghwm/default1.png"  data-src="image1.jpg"  class="lazy"  id="myImage" alt="MyImage">
<button id="changeImage">Change Image</button>

JavaScript code:

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

CSS code:

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

We define an image and a button in the HTML code. Click The JavaScript code will be triggered after the button to switch the source address of the image by adding or removing the CSS class on the image. At the same time, we defined the .image2 class in the CSS file so that the source address of the image can be dynamically changed.

2. Switch images through jQuery’s attr() method

This method is to change images directly through jQuery’s attr() method source address.

HTML code:

<img src="/static/imghwm/default1.png"  data-src="image1.jpg"  class="lazy"  id="myImage" alt="MyImage">
<button id="changeImage">Change Image</button>

JavaScript code:

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

We also define an image and a button in the HTML code. When the button is clicked, the JavaScript code will be triggered, throughattr() method to change the source address of the image and realize image switching.

Summary

The above are two commonly used jQuery image switching methods. Dynamic switching of images can be achieved by adding or removing CSS classes and directly changing the image source address. We can choose different methods to achieve the effect of image switching according to specific needs.

The above is the detailed content of How to change images in jquery. For more information, please follow other related articles on the PHP Chinese website!