jquery에서 이미지를 변경하는 방법

프런트 엔드 개발에서는 다양한 상태나 이벤트에 따라 페이지의 그림을 동적으로 변경해야 하는 경우가 많습니다. 이때 그림 전환을 완료하려면 jQuery를 사용해야 합니다.

다음은 일반적으로 사용되는 두 가지 jQuery 이미지 전환 방법을 소개합니다.

1. CSS 클래스를 추가하여 이미지를 전환합니다.

이미지에 CSS 클래스를 추가하거나 제거하여 이미지를 전환하는 방법입니다.

HTML 코드:

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

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

CSS 코드:

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

HTML 코드에 이미지와 버튼을 정의합니다. 버튼을 클릭하면 CSS를 추가하거나 제거하여 JavaScript 코드가 실행됩니다. 이미지 클래스에서 이미지의 소스 주소를 전환합니다. 동시에 이미지의 소스 주소가 동적으로 변경될 수 있도록 CSS 파일에 .image2 클래스를 정의했습니다. .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. jQuery의 attr() 메서드를 통해 이미지 전환

이 메서드는 jQuery의 attr() 메서드를 통해 이미지의 소스 주소를 직접 변경하는 방법입니다.

HTML 코드: 🎜rrreee🎜JavaScript 코드: 🎜rrreee🎜또한 HTML 코드에 이미지와 버튼을 정의합니다. 버튼을 클릭하면 JavaScript 코드가 실행되며 attr을 통해 변경할 수 있습니다. () 메서드는 이미지 전환을 달성하기 위한 이미지의 소스 주소입니다. 🎜🎜요약🎜🎜위는 일반적으로 사용되는 jQuery 이미지 전환 방법 두 가지입니다. CSS 클래스를 추가하거나 제거하고 이미지 소스 주소를 직접 변경하여 이미지를 동적으로 전환할 수 있습니다. 특정 요구에 따라 이미지 전환 효과를 얻기 위해 다양한 방법을 선택할 수 있습니다. 🎜

위 내용은 jquery에서 이미지를 변경하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!