광범위한 JavaScript 없이 클릭 시 이미지를 변경하는 방법은 무엇입니까?

클릭 시 이미지 변경: 간단한 접근 방식

클릭 이벤트 시 이미지를 동적으로 교환하는 작업에 직면했을 때 처음에는 다음을 사용할 수 있습니다. 신속한 솔루션을 위한 JavaScript 또는 jQuery. 그러나 더 간단한 시나리오의 경우 광범위한 JavaScript 코드가 필요하지 않은 대안이 있습니다.

이미지를 쉽게 변경하려면 아래와 같이 이미지 요소에 고유 ID를 추가하는 것이 좋습니다.

<ul>
  <li><img src="image1.png">

다음으로 클릭 시 이미지 교체를 처리하는 간단한 JavaScript 함수를 만듭니다.

function changeImage(image) {
  // Get the current image source
  let currentSrc = image.src;

  // Replace the source with the new image
  const newSrc = currentSrc.replace(".png", "_colored.png");
  image.src = newSrc;
}

이 함수에서는 현재 이미지 소스를 검색하고 다음으로 바꿉니다. 이름에 "_color"가 포함된 새 소스.

마지막으로 각 이미지에 onclick 이벤트 리스너를 추가하여 클릭 시changeImage() 함수를 호출합니다.

<ul>
  <li><img src="image1.png">

이 접근 방식을 사용하면 , 복잡한 JavaScript나 의사 선택기 없이도 클릭 시 이미지를 원활하게 교체할 수 있습니다.

위 내용은 광범위한 JavaScript 없이 클릭 시 이미지를 변경하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!