jQuery Hide and Goシーク

Question

私はユーザーが質問に答える方法に基づいて非表示にする必要がある複雑な一連のdivを証明しています。

基本的に、ユーザーに質問が表示されます。彼らが質問に答えると、彼らはタイトルと説明からなる回答方法に基づいてコンテンツを提示されます。現在の質問は隠され、次の質問が提示されます。彼らが次の質問に答えると、前の説明は隠され、次のタイトルと説明が表示されるはずです。これはすべての質問に答えるまで続きます。

私のHTMLは次のようなものになります。私のjs/jqueryのは、このようになります

<div class="container"> 
<form> 
    <div id="q-1" class="question-group row"> 
     <div class="question-wrap"> 
      <p>question 1?</p> 
      <label class="radio-inline"> 
       <input type="radio" name="q1" value="yes"> Yes 
      </label> 
      <label class="radio-inline"> 
       <input type="radio" name="q1" value="no"> No 
      </label> 
     </div> 
     <div id="q1-yes" class="reason-wrap"> 
      <div class="reason"> 
       <h2><span class="number">1</span>reason 1</h2> 
      </div> 
      <div class="reason-desc"> 
       <p>description</p>      
      </div> 
     </div> 
     <div id="q1-no" class="reason-wrap"> 
      <div class="reason"> 
       <h2><span class="number">1</span>reason 1</h2> 
      </div> 
      <div class="reason-desc"> 
       <p>description</p>      
      </div> 
     </div> 
    </div> 
    <div id="q-2" class="question-group row"> 
     <div class="question-wrap"> 
      <p>question 2?</p> 
      <label class="radio-inline"> 
       <input type="radio" name="q2" value="yes"> Yes 
      </label> 
      <label class="radio-inline"> 
       <input type="radio" name="q2" value="no"> No 
      </label> 
     </div> 
     <div id="q2-yes" class="reason-wrap"> 
      <div class="reason"> 
       <h2><span class="number">2</span>reason 2</h2> 
      </div> 
      <div class="reason-desc"> 
       <p>description</p>      
      </div> 
     </div> 
     <div id="q2-yes" class="reason-wrap"> 
      <div class="reason"> 
       <h2><span class="number">2</span>reason 2</h2> 
      </div> 
      <div class="reason-desc"> 
       <p>description</p>      
      </div> 
     </div> 
    </div> 
</form> 
</div> 

を：（。私は私が正常に機能し得るように見えることはできませんどのようなコメントをしました）

$('input[type="radio"]').click(function() { 
    var desc = ('#'+$(this).attr("name")+'-'+$(this).val()); //matching div to display for this question 
    $(desc).toggle(); //show div for this question 
    $(this).closest('.question-wrap').hide(); //hide this question 
    $(this).parent().next('.question-wrap').show(); //show next question NOT WORKING 
    //??? hide only the .reason-desc that is currently showing when next question is answered 
}); 

デモ：http://codepen.io/anon/pen/XMJZLK

Answer 1

これがあなたが探しているものかどうかは分かりませんが、これが私の最高の試みです：

また

$('input[type="radio"]').click(function() { 
 
    var desc = ('#' + $(this).attr("name") + '-' + $(this).val()); //matching div to display for this question 
 
    $(desc).toggle(); //show div for this question 
 
    $(this).closest('.question-wrap').hide() 
 
    .parent().next().show().end().prev().find('.reason-desc').hide() 
 
});

.question-group:not(:first-of-type) { 
 
    display: none; 
 
} 
 

 
.reason-wrap { 
 
    display: none; 
 
    margin-bottom: 10px; 
 
} 
 

 
.reason h2 { 
 
    font-size: 24px; 
 
} 
 

 
.reason-desc p { 
 
    font-size: 16px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <form> 
 
    <div id="q-1" class="question-group row"> 
 
     <div class="question-wrap"> 
 
     <p>question 1?</p> 
 
     <label class="radio-inline"> 
 
       <input type="radio" name="q1" value="yes"> Yes 
 
      </label> 
 
     <label class="radio-inline"> 
 
       <input type="radio" name="q1" value="no"> No 
 
      </label> 
 
     </div> 
 
     <div id="q1-yes" class="reason-wrap"> 
 
     <div class="reason"> 
 
      <h2><span class="number">1</span>reason 1</h2> 
 
     </div> 
 
     <div class="reason-desc"> 
 
      <p>description</p> 
 
     </div> 
 
     </div> 
 
     <div id="q1-no" class="reason-wrap"> 
 
     <div class="reason"> 
 
      <h2><span class="number">1</span>reason 1</h2> 
 
     </div> 
 
     <div class="reason-desc"> 
 
      <p>description</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div id="q-2" class="question-group row"> 
 
     <div class="question-wrap"> 
 
     <p>question 2?</p> 
 
     <label class="radio-inline"> 
 
       <input type="radio" name="q2" value="yes"> Yes 
 
      </label> 
 
     <label class="radio-inline"> 
 
       <input type="radio" name="q2" value="no"> No 
 
      </label> 
 
     </div> 
 
     <div id="q2-yes" class="reason-wrap"> 
 
     <div class="reason"> 
 
      <h2><span class="number">2</span>reason 2</h2> 
 
     </div> 
 
     <div class="reason-desc"> 
 
      <p>description</p> 
 
     </div> 
 
     </div> 
 
     <div id="q2-no" class="reason-wrap"> 
 
     <div class="reason"> 
 
      <h2><span class="number">2</span>reason 2</h2> 
 
     </div> 
 
     <div class="reason-desc"> 
 
      <p>description</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    
 
    <div id="q-3" class="question-group row"> 
 
     <div class="question-wrap"> 
 
     <p>question 3?</p> 
 
     <label class="radio-inline"> 
 
       <input type="radio" name="q3" value="yes"> Yes 
 
      </label> 
 
     <label class="radio-inline"> 
 
       <input type="radio" name="q3" value="no"> No 
 
      </label> 
 
     </div> 
 
     <div id="q3-yes" class="reason-wrap"> 
 
     <div class="reason"> 
 
      <h2><span class="number">3</span>reason 3</h2> 
 
     </div> 
 
     <div class="reason-desc"> 
 
      <p>description</p> 
 
     </div> 
 
     </div> 
 
     <div id="q3-no" class="reason-wrap"> 
 
     <div class="reason"> 
 
      <h2><span class="number">3</span>reason 3</h2> 
 
     </div> 
 
     <div class="reason-desc"> 
 
      <p>description</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </form> 
 
    </div>

は、おそらく<div id="q2-yes">の2つのバージョンを持つのではなく、<div id="q2-no">を置くことを意味していることに注意してください。