스크립트 질문드립니다.

스크립트 질문드립니다.

QA

스크립트 질문드립니다.

본문

안녕하세요

다음 버튼 클릭하면 다음 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>
답변을 작성하시기 전에 로그인 해주세요.
전체 948
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT