스크립트 질문드립니다.
본문
안녕하세요
다음 버튼 클릭하면 다음 DIV로 넘어가는걸 만들고 있습니다.
소스는 아래와 같습니다.
<div class="mate-box show" data-idx="1">
<div class="step">
<h1>질문 <span>1/6</span></h1>
</div>
<div class="qu">
<p>질문1</p>
</div>
<div class="box">
문제
</div>
<div class="next">
<button class="btn_03">다음</button>
<button class="btn_03">4단계로</button>
</div>
</div>
<div class="mate-box show" data-idx="2">2단계</div>
<div class="mate-box show" data-idx="3">3단계</div>
<div class="mate-box show" data-idx="4">4단계</div>
..
.
.
<script>
$(function(){
$(".box input[type=radio]").on("change", function(e){
$(this).parents(".mate-box").find(".next").show();
});
$(".next button").on("click", function(e){
var idx = $(this).parents(".mate-box").data("idx") + 1;
if (idx > 6) {
location.href="#open0";
}
$(".mate-box").removeClass("show");
$(".mate-box[data-idx="+idx+"]").addClass("show");
});
});
</script>
이렇게 6단계 까지는 순차적으로 잘 나가는데요
예를들면 1단계 버튼에서 4단계 버튼으로 눌럿을때
2단계가 아닌
4단계 화면이 나오게 하고 싶습니다.
onclick 이벤트로 넘기려 시도 해보앗는데
자꾸 2단계로만 넘어가네요 ㅠ
고수님들의 조언 부탁드립니다.
답변 1
이미 상단에 data-idx 가 정의되어있죠.
그리고 그 하위 next 클래스가 있구요
암만 클릭해도 next 클래스를 덮고있는 idx 가 1로 정의되어 있기 때문에
다음은 무조건 2가 되는거에요.
해당 예제를 이해하려면 data 개념 부터 아셔야 합니다.
퀴즈나 설문 같은걸 만들고 계신것 같은데
가장 기초적인 css+제이쿼리 조합부터 공부하심이 좋을것 같네요.
<style type="text/css">
.btn {display:inline-block;padding:5px;border:1px solid #ddd; cursor: pointer; }
.step {display: none; height:100px;border:1px solid #ddd; margin-top:5px;}
.step1 {display:block;}
</style>
<div style="display: inline-block;">
<div class="btn btn1" onclick="$('.step').hide(); $('.step1').show();">1단계</div>
<div class="btn btn2" onclick="$('.step').hide(); $('.step2').show();">2단계</div>
<div class="btn btn3" onclick="$('.step').hide(); $('.step3').show();">3단계</div>
<div class="btn btn4" onclick="$('.step').hide(); $('.step4').show();">4단계</div>
<div class="step step1">1내용</div>
<div class="step step2">2내용</div>
<div class="step step3">3내용</div>
<div class="step step4">4내용</div>
</div>
답변을 작성하시기 전에 로그인 해주세요.