js 토글 질문드립니다.
본문
연휴라서 다들 계실지 모르겠네요~
js 질문 드립니다.
테스트중인 사이트는 여기 입니다.
위 빨간색으로 체크한 버튼을 누르면
아래와 같이 토글이 열리는데요,
토글 js코드
$('.subBox').each(function(){
$(this).css("height",$(this).height()+"px");
});
$('.subBox').css('display', 'none');
$(".ctlbtn").click(function () {
var index = $(".ctlbtn").index($(this));
$('.subBox').eq(index).slideToggle('slow');
});
질문)
열고 닫히는 버튼을 이미지로 넣었는데, (+ 開く / - 閉じる)
저 위 두번째 이미지처럼 닫기 버튼으로 변환하고 싶습니다
예전에는 아이콘(폰트어썸)을 이용한 적이 있어서
$('.ctlbtn i').eq(index).toggleClass('fa-chevron-circle-down fa-minus-circle');
위와 같이 클래스를 바꿔가면서 + - 바뀌도록 했었는데,
이미지 자체를 바꾸려니 어찌 해야 할지 모르겠네요.
마찬가지로 클래스를 변경하도록 해서
img에 display:none; 한 후 background로 닫기이미지를 넣어주는 것이
가장 좋은 방법일까요?
혹시 js로 제어할 수 있으면 img자체를 바꿔 넣을 수 있으면 좋겠다고 생각하고 있습니다.
답변 1
이미지에도 클래스나 아이디를 주시고
인덱스가 같다는 가정하에
여러가지 방법이 있는데
if( $(이미지).eq(index).attr("src") == "체크할 이미지졍") {
$(이미지).eq(index).attr("src","변경할이미지");
}else {
$(이미지).eq(index).attr("src","변경할이미지");
}
하시면 될거 같습니다.
토글 있는 부분에요
감사합니다 ❤️
