제이쿼리로 어떻게든 원하는대로 구현을 하는데
본문
하면서도 회의감이 드는게..
분명 이것보다 더 간결하게 할수 있을거 같은데
엄청난 길이로 제이쿼리를 완성해서 결국 돌아가긴 하면 되는걸까요
아니면 더 공부를 해서 고칠 부분을 고쳐야 할까요?
이런 생각이 드는게
<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');});
zzzz님 지운아빠님 감사합니다
그럼 active가 아닌 이미지들을 off로 바꾸려면 따로 함수를 줘야 하는것일까요..?
답변을 작성하시기 전에 로그인 해주세요.