복잡한 JavaScript 없이 클릭 시 이미지를 쉽게 바꿀 수 있는 방법은 무엇입니까?

간단하게 클릭 시 이미지 변경

클릭 시 이미지 수정에 관해 문의하신 내용은 과도한 JavaScript 코드가 없는 간단한 솔루션의 필요성을 강조합니다. 다음은 원하는 결과를 얻기 위해 HTML과 JavaScript를 활용하는 접근 방식입니다.

HTML 마크업:

"id" 속성을 사용하여 각 이미지에 고유 식별자를 할당합니다.

<pre class="brush:php;toolbar:false">
<li><img alt="" src="image1.jpg">

자바스크립트 기능:

클릭 시 이미지 교체를 처리하는 JavaScript 함수 만들기:

function swapImage(imageId) {
  var image = document.getElementById(imageId);
  if (image.src.endsWith(".jpg")) {
    image.src = image.src.replace(".jpg", ".png");
  } else {
    image.src = image.src.replace(".png", ".jpg");
  }
}

이벤트 처리:

" 첨부 onclick" 이벤트 리스너를 각 이미지에 전달하여 해당 이미지를 전달합니다. ID:

<pre class="brush:php;toolbar:false">
<li><img alt="" src="image1.jpg">

기능:

이미지를 클릭하면 이미지의 현재 파일 확장자를 확인하는 swapImage() 함수가 호출됩니다. ".jpg"인 경우 함수는 이를 ".png"로 대체하여 이미지를 효과적으로 변경합니다. ".png"인 경우 함수는 프로세스를 반대로 진행하여 ".jpg"로 다시 변경합니다.

이 접근 방식은 HTML 및 JavaScript를 활용하여 추가 CSS 클래스나 의사 없이 클릭 한 번으로 이미지를 수정합니다. 쿼리에 대한 간단하고 효율적인 솔루션을 제공하는 선택기입니다.

위 내용은 복잡한 JavaScript 없이 클릭 시 이미지를 쉽게 바꿀 수 있는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!