SIR
KCP 창업 지원, 수수료 국내최저 2.9% 제공 이벤트!

스크립트 질문드립니다.

스크립트 질문드립니다.

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>
주소복사
채택됨
답변의 댓글
답변을 작성하시기 전에 로그인 해주세요.
전체 43,203
고마운 분의 도움으로 질문을 해결하셨다면, 채택을 눌러서 감사의 마음을 전하세요.
어떻게 질문해야 할지 모른다면 질문하는 방법을 읽어 보신후 질문해 보세요.
QA 내용 검색

회원로그인

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

© SIRSOFT