次のボタンをクリックして同じクラスのdivをリストから表示する方法は？

Question

私はリストに未回答のクラスのdivを持っています。次のボタンをクリックすると、現在のdivを非表示にして次のdivに移動します。

ここには8つのdivがあります。 3,5,7,8は答えられていないクラスです。私が "3" divから次のボタンをクリックすると。それは "5" divにトグルする必要があります。残りの "3,7,8"はdisplay noneです。これをカスタマイズする必要がありますか？あなたのHTMLパスthisで

$(document).ready(function() { 
 
    $('ul.tabs').tabs(); 
 
});

.quiz-container h1 { 
 
    text-align: center; 
 
    color: #fff; 
 
    margin-bottom: 10px; 
 
} 
 

 
.quiz-container .box{ 
 
    padding: 10px 15px; 
 
} 
 
.quiz-container .box label{ 
 
\t cursor:pointer; 
 
} 
 
.quiz-container .question { 
 
    background-color: #170092; 
 
    margin-bottom: 25px; 
 
    font-size: 115%; 
 
    color:#fff; 
 
    padding-top: 20px; 
 
    padding-bottom: 20px; 
 
    position: relative; 
 
} 
 
.quiz-container .question:after { 
 
    content: ""; 
 
    position: absolute; 
 
    bottom: -15px; 
 
    left: 35px; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 15px solid transparent; 
 
    border-right: 15px solid transparent; 
 
    border-top: 15px solid #170092; 
 
} 
 
.quiz-container .question span.question_number_quiz { 
 
    background-color:#170092; 
 
    color: white; 
 
    display: block; 
 
    float: left; 
 
    margin-left: -15px; 
 
    margin-top: -10px; 
 
    margin-right: 0px; 
 
    padding: 10px 10px; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    width: 40px; 
 
} 
 
.quiz-container .answers { 
 
    padding-left: 0; 
 
    list-style-type: none; 
 
} 
 
.quiz-container .answers .answer { 
 
    background-color: #fff; 
 
    color: #727272; 
 
    border:1px solid #eee; 
 
    margin-bottom: 10px; 
 
    position: relative; 
 
} 
 
.quiz-container .answers .answer:hover, .quiz-container .answers .answer.active { 
 
    cursor: pointer; 
 
    color: #170092; 
 
    border:1px solid #170092; 
 
} 
 
.quiz-container .answers .answer:hover span:not([class^="checkmark"]), .quiz-container .answers .answer.active span:not([class^="checkmark"]) { 
 
    background-color: #170092; 
 
} 
 
.quiz-container .answers .answer.active span.checkmark { 
 
    background-color: #fff; 
 
    position: absolute; 
 
    top: 8px; 
 
    right: 20px; 
 
    font-size: 120%; 
 
} 
 
.quiz-container .answers .answer span:not([class^="checkmark"]) { 
 
    background-color: #727272; 
 
    color: white; 
 
    display: block; 
 
    float: left; 
 
    margin-left: -15px; 
 
    margin-top: -10px; 
 
    margin-right: 20px; 
 
    padding: 10px 0; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    width: 40px; 
 
} 
 
.quiz-container button { 
 
    background-color: #cb2127; 
 
    color: #fff; 
 
    font-size: 110%; 
 
    border: 0; 
 
    width: 100%; 
 
    position: relative; 
 
} 
 
.quiz-container button:hover { 
 
    background-color: #2ecc71; 
 
    cursor: pointer; 
 
} 
 
.quiz-container button span { 
 
    font-size: 200%; 
 
    position: absolute; 
 
    top: -3px; 
 
    right: 10px; 
 
} 
 

 
.quiz-container{ 
 
\t width:65%; 
 
\t margin:0 auto 39px; 
 
} 
 
.tabs .tab.completed_que a{ 
 
\t color:#fff; 
 
\t background-color:#009933; 
 
} 
 
.tabs .tab.missedque a{ 
 
\t color:#fff; 
 
\t background-color:#A50303; 
 
} 
 
.questiontabs .tab a.active{ 
 
    background-color: #fcfcfc; 
 
    color: #212121; 
 
\t border:none !important; 
 
} 
 
.questiontabs .tab{ 
 
    \t height: 30px; 
 
    line-height: 29px; 
 
} 
 
    .questiontabs .tab a{padding:0 10px;color:#212121; border-radius:4px;} 
 
.questiontabs a.active{ 
 
\t border:none !important; 
 
} 
 

 
.questiontabs{ 
 
\t background:none; 
 
\t margin-top:-27px; 
 
} 
 

 
.quiz-container .indicator{ 
 
\t display:none !important; 
 
} 
 
.icon{ 
 
\t border-radius: 2px; 
 
    display: inline-block; 
 
    height: 10px; 
 
    margin-right: 10px; 
 
    vertical-align: middle; 
 
    width: 10px; 
 
} 
 
.active .icon{ 
 
\t background:#fcfcfc none repeat scroll 0 0; 
 
    border:1px solid #ddd; 
 
} 
 
.attempted .icon{ 
 
\t background:#009933 none repeat scroll 0 0; 
 
    border-color: #009933; 
 
} 
 
.not-attempted .icon{ 
 
\t background:#A50303 none repeat scroll 0 0; 
 
    border-color: #A50303; 
 
} 
 
.test_status li{ 
 
\t display:inline-block; 
 
\t margin-right:10px; 
 
} 
 
.questiontabs_test{ 
 
\t visibility:hidden; 
 
} 
 
.questiontabs .completed_que.disabled a{ 
 
\t opacity:0.4; 
 
} 
 
.questiontabs .completed_que.disabled a:hover{ 
 
\t cursor:not-allowed; 
 
\t color:#fff; 
 
} 
 
.questiontabs .completed_que.disabled .active{ 
 
\t background-color:#009933; 
 
\t color:#fff; 
 
} 
 
.question_images img{ 
 
\t display:inline-block;vertical-align:top; 
 
} 
 
.question_action_form p{ 
 
\t margin:0px; 
 
} 
 
.instructions li{ 
 
\t list-style:inside; 
 
} 
 
.instructions ol li{ 
 
\t list-style-type:decimal; 
 
\t line-height:35px; 
 
} 
 
.instructions p{ 
 
\t font-size:13px; 
 
\t margin-bottom:10px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
 
<div class="quiz-container"> 
 
       \t \t <p>Question 1 of 5</p> 
 
        <div class="question1 questions" id="questions1"> 
 
         <div class="question box"> 
 
          <p><span>1.</span> Which one of the five is least like the other four ?</p> 
 
          </div> 
 
         <ul class="answers"> 
 
          <li class="answer box"> 
 
           <p><span>a</span>Shark</p> 
 
          </li> 
 
          <li class="answer box"> 
 
           <p><span>b</span>Deer</p> 
 
          </li> 
 
          <li class="answer box"> 
 
           <p><span>c</span> Cow</p> 
 
          </li> 
 
          <li class="answer box"> 
 
           <p><span>d</span> Dog</p> 
 
          </li> 
 
          </ul> 
 
          <div class="aligncenter control_sec pull-right"> 
 
          \t <input type="submit" class="btn red waves-effect" value="Skip" id="next_1"> 
 
          <input type="submit" class="btn red waves-effect" value="Submit" id="submit_1"> 
 
          <div class="clearfix"></div> 
 
          </div> 
 
        </div> 
 
        <div class="question2 questions" id="questions2"> 
 
         <div class="question box"> 
 
          <p><span>2.</span> Which number should come next in the series ? 1 - 1 - 2 - 3 - 5 - 8 - 13</p> 
 
          </div> 
 
         <ul class="answers"> 
 
          <li class="answer box"> 
 
           <p><span>a</span>8</p> 
 
          </li> 
 
          <li class="answer box"> 
 
           <p><span>b</span>21</p> 
 
          </li> 
 
          <li class="answer box"> 
 
           <p><span>c</span> 26</p> 
 
          </li> 
 
          <li class="answer box"> 
 
           <p><span>d</span> 31</p> 
 
          </li> 
 
          </ul> 
 
          <div class="aligncenter control_sec pull-right"> 
 
          \t <input type="submit" class="btn black waves-effect" value="Previous" id="back_1"> 
 
          \t <input type="submit" class="btn red waves-effect" value="Skip" id="next_2" onClick="next()"> 
 
          <input type="submit" class="btn red waves-effect" value="Submit" id="submit_2"> 
 
          <div class="clearfix"></div> 
 
          </div> 
 
        </div> 
 
        <div class="question3 questions unanswered_que" id="questions3"> 
 
         <div class="question box"> 
 
          <p><span>3.</span> If you rearrange the letters "ANICH", you would have the name of a/an: </p> 
 
          </div> 
 
         <ul class="answers"> 
 
          <li class="answer box"> 
 
           <p><span>a</span>Country</p> 
 
          </li> 
 
          <li class="answer box"> 
 
           <p><span>b</span>Ocean</p> 
 
          </li> 
 
          <li class="answer box"> 
 
           <p><span>c</span> State</p> 
 
          </li> 
 
          <li class="answer box"> 
 
           <p><span>d</span> City</p> 
 
          </li> 
 
          </ul> 
 
          <div class="aligncenter control_sec pull-right"> 
 
          \t <input type="submit" class="btn red waves-effect" value="Next" id="next_4" onClick="next()"> 
 
          <div class="clearfix"></div> 
 
          </div> 
 
        </div> 
 
        <div class="question4 questions" id="questions4"> 
 
         <div class="question box"> 
 
          <p><span>4.</span> I'm a male. If Albert's son is my son's father, what is the relationship between Albert and me? </p> 
 
          </div> 
 
         <ul class="answers"> 
 
          <li class="answer box"> 
 
           <p><span>a</span>he is my brother</p> 
 
          </li> 
 
          <li class="answer box"> 
 
           <p><span>b</span>he is my uncle</p> 
 
          </li> 
 
          <li class="answer box"> 
 
           <p><span>c</span> he is my father</p> 
 
          </li> 
 
          <li class="answer box"> 
 
           <p><span>d</span> he is my sister</p> 
 
          </li> 
 
          </ul> 
 
        </div> 
 
        <div class="question5 questions unanswered_que" id="questions5"> 
 
         <div class="question box"> 
 
          <p><span>5.</span> Nearby Priests" - If these letters are rearranged, they create the name of which person? </p> 
 
          </div> 
 
         <ul class="answers"> 
 
          <li class="answer box"> 
 
           <p><span>a</span> A famous scientist </p> 
 
          </li> 
 
          <li class="answer box"> 
 
           <p><span>b</span> A pop princess </p> 
 
          </li> 
 
          <li class="answer box"> 
 
           <p><span>c</span> A football player</p> 
 
          </li> 
 
          <li class="answer box"> 
 
           <p><span>d</span> A baseball player</p> 
 
          </li> 
 
          </ul> 
 
          <div class="aligncenter control_sec pull-right"> 
 
          \t <input type="submit" class="btn red waves-effect" value="Next" id="next_4" onClick="next()"> 
 
          <div class="clearfix"></div> 
 
          </div> 
 
        </div> 
 
        <div class="question6 questions" id="questions6"> 
 
         <div class="question box"> 
 
          <p><span>6.</span> Nearby Priests" - If these letters are rearranged, they create the name of which person? </p> 
 
          </div> 
 
         <ul class="answers"> 
 
          <li class="answer box"> 
 
           <p><span>a</span> A famous scientist </p> 
 
          </li> 
 
          <li class="answer box"> 
 
           <p><span>b</span> A pop princess </p> 
 
          </li> 
 
          <li class="answer box"> 
 
           <p><span>c</span> A football player</p> 
 
          </li> 
 
          <li class="answer box"> 
 
           <p><span>d</span> A baseball player</p> 
 
          </li> 
 
          </ul> 
 
          <div class="aligncenter control_sec pull-right"> 
 
          \t \t <input type="submit" class="btn red waves-effect" value="Next" id="next_4" onClick="next()"> 
 
          <div class="clearfix"></div> 
 
          </div> 
 
        </div> 
 
        <div class="question7 questions unanswered_que" id="questions7"> 
 
         <div class="question box"> 
 
          <p><span>7.</span> Nearby Priests" - If these letters are rearranged, they create the name of which person? </p> 
 
          </div> 
 
         <ul class="answers"> 
 
          <li class="answer box"> 
 
           <p><span>a</span> A famous scientist </p> 
 
          </li> 
 
          <li class="answer box"> 
 
           <p><span>b</span> A pop princess </p> 
 
          </li> 
 
          <li class="answer box"> 
 
           <p><span>c</span> A football player</p> 
 
          </li> 
 
          <li class="answer box"> 
 
           <p><span>d</span> A baseball player</p> 
 
          </li> 
 
          </ul> 
 
          <div class="aligncenter control_sec pull-right"> 
 
          \t \t <input type="submit" class="btn red waves-effect" value="Next" id="next_4" onClick="next()"> 
 
          <div class="clearfix"></div> 
 
          </div> 
 
        </div> 
 
        <div class="question8 questions unanswered_que" id="questions8"> 
 
         <div class="question box"> 
 
          <p><span>8.</span> Nearby Priests" - If these letters are rearranged, they create the name of which person? </p> 
 
          </div> 
 
         <ul class="answers"> 
 
          <li class="answer box"> 
 
           <p><span>a</span> A famous scientist </p> 
 
          </li> 
 
          <li class="answer box"> 
 
           <p><span>b</span> A pop princess </p> 
 
          </li> 
 
          <li class="answer box"> 
 
           <p><span>c</span> A football player</p> 
 
          </li> 
 
          <li class="answer box"> 
 
           <p><span>d</span> A baseball player</p> 
 
          </li> 
 
          </ul> 
 
          <div class="aligncenter control_sec pull-right"> 
 
          \t \t <input type="submit" class="btn red waves-effect" value="Next" id="next_4" onClick="next()"> 
 
          <div class="clearfix"></div> 
 
          </div> 
 
        </div> 
 
         <div class="row MT20"> 
 
         <div class="col s12"> 
 
          <ul class="tabs questiontabs"> 
 
          <li class="tab completed_que disabled"><a href="#questions1">1</a></li> 
 
          <li class="tab completed_que disabled"><a href="#questions2">2</a></li> 
 
          <li class="tab missedque"><a class="active" href="#questions3">3</a></li> 
 
          <li class="tab completed_que disabled"><a href="#questions4">4</a></li> 
 
          <li class="tab missedque"><a href="#questions5">5</a></li> 
 
          <li class="tab completed_que disabled"><a href="#questions6">6</a></li> 
 
           <li class="tab missedque"><a href="#questions7">7</a></li> 
 
           <li class="tab missedque"><a href="#questions8">8</a></li> 
 
          </ul> 
 
         </div> 
 
      \t \t </div> 
 
         <div class="aligncenter test_status"> 
 
         \t <ul> 
 
         \t <li class="active"><span class="icon"></span>Active Question</li> 
 
          <li class="attempted"><span class="icon"></span>Attempted</li> 
 
          <li class="not-attempted"><span class="icon"></span>Not attempted</li> 
 
         </ul> 
 
         </div> 
 
       </div>

Answer 1

パラメータとして私next()機能..このような..

<input type="submit" class="btn red waves-effect" value="Next" id="next_4" onClick="next(this)">

、これは動作するはずです。..このコードを使用します。

function next(_this){ 
    var _el = $(_this).parents('div.active'); 
    var _id = $(_this).attr('id'); 
    $(_el).removeClass('active'); 
    $(_el).css('display','none'); 
    $(_el).closest('div').nextAll('.unanswered_que').eq(0).css('display','block').addClass('active'); 
    $('li.tab').removeClass('active'); 
    $('[href="#' + _id + '"]').addClass('active'); 
} 

注：あなたはまだ私たちは、これを複製することができるようにあなたも、いくつかの `CSS`を追加してもらえあなたの条件