제이쿼리로 어떻게든 원하는대로 구현을 하는데
본문
하면서도 회의감이 드는게..
분명 이것보다 더 간결하게 할수 있을거 같은데
엄청난 길이로 제이쿼리를 완성해서 결국 돌아가긴 하면 되는걸까요
아니면 더 공부를 해서 고칠 부분을 고쳐야 할까요?
이런 생각이 드는게
<div id="roll_left">
<ul>
<li><a href="#"><img src="images/roll_btn1_on.png"/></a></li>
<li><a href="#"><img src="images/roll_btn2_off.png"/></a></li>
<li><a href="#"><img src="images/roll_btn3_off.png"/></a></li>
<li><a href="#"><img src="images/roll_btn4_off.png"/></a></li>
</ul>
</div>
이렇게 있을때 첫번째 이미지를 클릭하면 얘만 active클래스가 먹고나머지 이미지가 off가 되고 이런건데
<li><a href="#" class="active"><img src="images/roll_btn1_on.png"/></a></li>
<li><a href="#"><img src="images/roll_btn2_off.png"/></a></li>
<li><a href="#"><img src="images/roll_btn3_off.png"/></a></li>
<li><a href="#"><img src="images/roll_btn4_off.png"/></a></li>
이런식으로...
이걸 제이쿼리로 짤려다 보니까
$("#roll_left ul li").eq(0).click(function(e){
$("#roll_left ul li a").filter(".active").children("img").attr("src",$("#roll_left ul li a").filter(".active").children("img").attr("src").replace("off","on"));
$("#roll_left ul li a").eq(1).children("img").attr("src",$("#roll_left ul li a ").eq(1).children("img").attr("src").replace("on","off"));
$("#roll_left ul li a").eq(2).children("img").attr("src",$("#roll_left ul li a ").eq(2).children("img").attr("src").replace("on","off"));
$("#roll_left ul li a").eq(3).children("img").attr("src",$("#roll_left ul li a ").eq(3).children("img").attr("src").replace("on","off"));
});
이렇게 되거든요 이게 네개가 있는거죠
분명 저거보다 간결하게 만들수 있을거 같은데..
그렇지 않나요..?
답변 3
저도 허접하지만...
$(function() {
var anchor = $("#roll_left a");
$("#roll_left img").click(function(){
anchor.removeClass("active");
$(this).parent("a").addClass("active");
});
});
참여함
$('#roll_left a').click(function(){$('.active').removeClass('active');$(this).addClass('active');});
아하, 이미지를 눌러야 한다는 말에 a 를 까먹고 있었네요.
질문자께서 회의감 든다는데 디자이너인 지운아빠님이 이렇게 코딩을 해버리면?? ㅎㅎ
농담이구요. 지운아빠님이 다양하게(디자인, 퍼블) 하는 모습이 보기가 좋습니다.
지운아빠님 code 에 살짝 놀랐습니다. ^^
전 그냥 흉내만 내는 거라... ㅠㅠ
zzzz님 지운아빠님 감사합니다
그럼 active가 아닌 이미지들을 off로 바꾸려면 따로 함수를 줘야 하는것일까요..?
답변을 작성하시기 전에 로그인 해주세요.
