|
<img class="tab active" src="aaa_off.jpg">
<img class="tab" src="bbb_off.jpg">
<img class="tab" src="ccc_off.jpg">
위와 같은 html이 있습니다.
페이지가 열렸을 때 첫번째 이미지만 aaa_off.jpg -> aaa_on.jpg 로 보이도록
active라는 class를 기본으로 줘서 jquery로 처리를 했습니다.
여기서 두 번째나 세번째 이미지를 선택했을 때
해당 이미지가 bbb_on.jpg / ccc_on.jpg로 바뀌게 하고 싶어요.
현재까지 작성한 제이쿼리는 아래와 같습니다.
if ( $('img').hasClass('active') ){
$('img.active').attr('src', $('img.active').attr('src').split('_off.')[0] + '_on.' + $('img.active').attr('src').split('_off.')[1]);
}
$('img.tab').click(function(){
if ( !$(this).hasClass('active') ){
var image_name = $(this).attr('src').split('_off.')[0];
var image_type = $(this).attr('src').split('off.')[1];
$(this).attr('src', image_name + '_on.' + image_type);
}
});
일단 클릭하면 이미지는 잘 바뀌는데,
문제는.. 다른 이미지를 클릭했을 때, on 되었던 이미지가 off로 바뀌게 해야 하는데
어떻게 처리를 해야 할지 모르겠습니다.
not(this)라는 명령어를 써서 클릭한 것 외에는 모두 _off 로 바꾸려고 해봤는데
제대로 동작을 하지 않네요.
즉, 클릭한 이미지만 파일명 뒤가 _on.jpg 로 되고,
클릭한 이미지 외의 이미지는 뒤가 _off.jpg 로 되어야 합니다.
어떻게 처리해야 할지 조언 부탁드립니다. ㅠㅠ | 
등록안내
등록안내
});
안에 $('img.tab') 을 전부 _on 에서 _off 로 바꾸는 로직과 active 클래스를 지우는 로직을 먼저 넣고
그 뒤에 $(this) 만 _on 으로 바꾸세요