jquery img attr 이미지 온오프(on/off) 바꾸기

원래는 src속성을 attr해주기 전에 변수에 attr로 속성을가져와서 그 스트링값을 수정 후 다시 지정해주었는데

attr메소드 내부에서 match로 체크해주고 replace하면서 return시켜주면 코드도 간결해지고 더 보기 좋은것같다.

 

HTML : 

<a href="javascript:;">
	<img src="images/btn_off.png" />
</a>

위와 같은 구조에서 a태그 클릭 시 img이미지를 on,off 토글 시키고 싶을 때,,

JS : 

$("a").on("click", function (e) {
  var $this = $(this); // element a
  $this.find(">img").attr("src", function (index, attr) {
    if (attr.match('_on')) {
      return attr.replace("_on.png", "._off.png");
    } else {
      return attr.replace("_off.png", "_on.png");
    }
  });
});

첫번째인자는 index, 두번째인자가 attr인것을 기억해야겠다..