이미지를 클릭했을 때 이미지 변경 (여러개)

*이미지를 감싸는 버튼 혹은 div등의 부모 태그가 있어야 함

*바뀌는 이미지들의 파일명은 규칙성을 가지고 있어야 함

 

동일한 구조의 버튼이 여러개가 있고 각각의 버튼을 눌렀을 때, 이미지가 바뀌는(토글) 기능

<button class="pinBtn_js">
  <img class="pin_js" src="/asset/images/pin_off.png" width="100%" alt="pin" title="pin" />
<button>

<button class="pinBtn_js">
  <img class="pin_js" src="/asset/images/pin_off.png" width="100%" alt="pin" title="pin" />
<button>

<button class="pinBtn_js">
  <img class="pin_js" src="/asset/images/pin_off.png" width="100%" alt="pin" title="pin" />
<button>

<button class="pinBtn_js">
  <img class="pin_js" src="/asset/images/pin_off.png" width="100%" alt="pin" title="pin" />
<button>

var pinBtn = document.querySelectorAll(".pinBtn_js");
var click = true;

function pinClick(element) {
  var btnTarget = element.currentTarget;
  var iconImg = btnTarget.querySelector(".pin_js");

  if (btnTarget.click) {
    iconImg.src = iconImg.src.replace("off.png", "on.png");
  } else {
    iconImg.src = iconImg.src.replace("on.png", "off.png");
  }
  btnTarget.click = !btnTarget.click;
}

for (var p = 0; p < pinBtn.length; p++) {
  pinBtn[p].addEventListener("click", pinClick);
}

이미지 파일명은 각각

pin_on, pin_off 이다

 

참고사이트

https://kyung-a.tistory.com/19

javascript | 여러 개의 버튼 클릭 시 style, img src 경로 변경

단일 이미지 변경 시 참고

https://bskyvision.com/entry/jQuery-%EC%9D%B4%EB%AF%B8%EC%A7%80%EB%A5%BC-%ED%81%B4%EB%A6%AD%ED%95%98%EB%A9%B4-%EB%8B%A4%EB%A5%B8-%EC%9D%B4%EB%AF%B8%EC%A7%80%EB%A1%9C-%EB%B3%80%EA%B2%BD%EB%90%98%EA%B2%8C-%ED%95%98%EA%B8%B0img1-img2-img1-img2

[jquery] 웹페이지에서 이미지를 클릭하면 다른 이미지로 변경되게 하기(img1->img2->img1->img2->...)