질문 모음에있는 JQuery hide/show divs

Question

라디오 버튼과 체크 박스를 사용하여 일련의 질문을하는 설문지를 디자인하고 있습니다. jQuery를 사용하여 한 번에 여러 질문을 표시하지 않고 작은 덩어리로 질문을 표시하고 싶습니다. 여기

<p> 
    1a. Has this happened to you? <label><input id="radio1" type="radio" name="toggler" value="1" />Yes </label> 
    <label><input id="radio2" type="radio" name="toggler" value="2" />No </label> 
</p> 

<div id="blk-2" class="toHide" style="display:none"> <!-- 1a. Choice: No --> 
    <form name="form1" method="post" action="nextPage.html"> 
     <input type="submit" name="Submit" value="Continue"><br /><br /> 
    </form> 
</div> 

<div id="blk-1" class="toHide" style="display:none"> <!-- 1a. Choice: Yes --> 
<p> 
    1b. How often has this happened to you? 
</p> 
<p><input type="radio" name="how_often" value="day" /> one of more times a day</p> 
<p><input type="radio" name="how_often" value="week" /> one of more times a week</p> 
<p><input type="radio" name="how_often" value="month" /> one of more times a month</p> 
    <!-- Display "reveal more" button after one of the "how_often" buttons is selected --> 
<input type="submit" name="Submit" value="reveal more"><br /><br /> 
</div><!-- /blk-1 --> 




<div id="02a_part1_question" style="display:none"> 
<p> 
    2a. Where has this happened to you? 
</p> 
    <table> 
     <tr> 
      <td></td> 
      <td><strong>Yes</strong></td> 
      <td><strong>No</strong></td> 
     </tr> 
     <tr> 
      <td>homeroom</td> 
      <td><input type="radio" name="homeroom" value="Yes" /></td> 
      <td><input type="radio" name="homeroom" value="No" /></td> 
     </tr> 
     <tr> 
      <td>cafeteria</td> 
      <td><input type="radio" name="cafeteria" value="Yes" /></td> 
      <td><input type="radio" name="cafeteria" value="No" /></td> 
     </tr> 
     <tr> 
      <td>academic class</td> 
      <td><input type="radio" name="academic_class" value="Yes" /></td> 
      <td><input type="radio" name="academic_class" value="No" /></td> 
     </tr> 
     <tr> 
      <td>before school</td> 
      <td><input type="radio" name="before_school" value="Yes" /></td> 
      <td><input type="radio" name="before_school" value="No" /></td> 
     </tr> 
    </table> 
    <input value="reveal more" type="submit"><br /><br /> 
</div><!-- /02a_part1_question --> 

<div id="02a_part2_question" style="display:none"> 
    <table> 
     <tr> 
      <td></td> 
      <td><strong>Yes</strong></td> 
      <td><strong>No</strong></td> 
     </tr> 
     <tr> 
      <td>bus</td> 
      <td><input type="radio" name="bus" value="Yes" /></td> 
      <td><input type="radio" name="bus" value="No" /></td> 
     </tr> 
     <tr> 
      <td>after school</td> 
      <td><input type="radio" name="after_school" value="Yes" /></td> 
      <td><input type="radio" name="after_school" value="No" /></td> 
     </tr> 
     <tr> 
      <td>gym</td> 
      <td><input type="radio" name="gym" value="Yes" /></td> 
      <td><input type="radio" name="gym" value="No" /></td> 
     </tr> 
     <tr> 
      <td>dances</td> 
      <td><input type="radio" name="dances" value="Yes" /></td> 
      <td><input type="radio" name="dances" value="No" /></td> 
     </tr> 
    </table> 
    <input value="reveal more" type="submit"><br /><br /> 
</div><!-- /02a_part2_question --> 

<div id="02a_part3_question" style="display:none"> 
    <table> 
     <tr> 
      <td></td> 
      <td><strong>Yes</strong></td> 
      <td><strong>No</strong></td> 
     </tr> 
     <tr> 
      <td>hallway</td> 
      <td><input type="radio" name="hallway" value="Yes" /></td> 
      <td><input type="radio" name="hallway" value="No" /></td> 
     </tr> 
     <tr> 
      <td>sporting events</td> 
      <td><input type="radio" name="sporting_events" value="Yes" /></td> 
      <td><input type="radio" name="sporting_events" value="No" /></td> 
     </tr> 
     <tr> 
      <td>bathroom</td> 
      <td><input type="radio" name="bathroom" value="Yes" /></td> 
      <td><input type="radio" name="bathroom" value="No" /></td> 
     </tr> 
     <tr> 
      <td>telephone</td> 
      <td><input type="radio" name="telephone" value="Yes" /></td> 
      <td><input type="radio" name="telephone" value="No" /></td> 
     </tr> 
    </table> 
    <input value="reveal more" type="submit"><br /><br /> 
</div><!-- /02a_part3_question --> 

<div id="02a_part4_question" style="display:none"> 
    <table> 
     <tr> 
      <td></td> 
      <td><strong>Yes</strong></td> 
      <td><strong>No</strong></td> 
     </tr> 
     <tr> 
      <td>online/texting during school</td> 
      <td><input type="radio" name="texting_dur_school" value="Yes" /></td> 
      <td><input type="radio" name="texting_dur_school" value="No" /></td> 
     </tr> 
     <tr> 
      <td>online/texting outside of school</td> 
      <td><input type="radio" name="texting_out_school" value="Yes" /></td> 
      <td><input type="radio" name="texting_out_school" value="No" /></td> 
     </tr> 
    </table> 
    <input value="reveal more" type="submit"><br /><br /> 
</div><!-- /02a_part4_question --> 




<div id="02b_part1_question" style="display:none"> 
<p> 
    2b. Identify the online/texting programs where this has occured. (This choice will appear if "online/texting during school" or "online/texting outside of school" was selected in 2a.) 
</p> 
    <table> 
     <tr> 
      <td></td> 
      <td><strong>Yes</strong></td> 
      <td><strong>No</strong></td> 
     </tr> 
     <tr> 
      <td>Facebook</td> 
      <td><input type="radio" name="Facebook" value="Yes" /></td> 
      <td><input type="radio" name="Facebook" value="No" /></td> 
     </tr> 
     <tr> 
      <td>Twitter</td> 
      <td><input type="radio" name="Twitter" value="Yes" /></td> 
      <td><input type="radio" name="Twitter" value="No" /></td> 
     </tr> 
     <tr> 
      <td>IMing</td> 
      <td><input type="radio" name="IMing" value="Yes" /></td> 
      <td><input type="radio" name="IMing" value="No" /></td> 
     </tr> 
     <tr> 
      <td>Email</td> 
      <td><input type="radio" name="Email" value="Yes" /></td> 
      <td><input type="radio" name="Email" value="No" /></td> 
     </tr> 
     <tr> 
      <td>Myspace</td> 
      <td><input type="radio" name="Myspace" value="Yes" /></td> 
      <td><input type="radio" name="Myspace" value="No" /></td> 
     </tr> 
     <tr> 
      <td>Texting</td> 
      <td><input type="radio" name="Texting" value="Yes" /></td> 
      <td><input type="radio" name="Texting" value="No" /></td> 
     </tr> 
     <tr> 
      <td>Online Gaming</td> 
      <td><input type="radio" name="Online_Gaming" value="Yes" /></td> 
      <td><input type="radio" name="Online_Gaming" value="No" /></td> 
     </tr> 
    </table> 
    <input value="reveal more" type="submit"><br /><br /> 
</div><!-- /02b_part1_question --> 





<div id="02c_question" style="display:none"> 
<p> 
    2c. Click on the ONE place where this has happened the most. 
    <br /> 
    (This section appears with items that were marked YES from 2a.) 
</p> 
    <table> 
     <tr> 
      <td><input type="radio" name="2c" value="(name)" /> item selected from 2a if necessary</td> 
     </tr> 
     <tr> 
      <td><input type="radio" name="2c" value="(name)" /> item selected from 2a if necessary</td> 
     </tr> 
     <tr> 
      <td><input type="radio" name="2c" value="(name)" /> item selected from 2a if necessary</td> 
     </tr> 
     <tr> 
      <td><input type="radio" name="2c" value="(name)" /> item selected from 2a if necessary</td> 
     </tr> 
     <tr> 
      <td><input type="checkbox" name="checkbox27" value="checkbox"> etc.</td> 
     </tr> 
     <tr> 
      <td><input type="checkbox" name="checkbox27" value="checkbox"> etc.</td> 
     </tr> 
    </table> 
    <input value="Continue" type="submit"><br /><br /> 
</div><!-- /02c_question --> 

는 자바 스크립트입니다 :

$(document).ready(function() { 

    $(function() { 
     $("[name=toggler]").click(function() { 
      $('.toHide').hide(); 
      $("#blk-" + $(this).val()).toggle(); 
     }); 
    }); 

    $(':submit').click(function() { 
     $('#02a_part1_question').show(); 
     $('#02a_part2_question').show(); 
     $('#02a_part3_question').show(); 
     $('#02a_part4_question').show(); 
     $('#02b_question').show(); 
     $('#02c_question').show(); 
    }); 

}); 

첫 번째 부분 (1A) 작동하지만이의 나머지 부분을 표시 할 수없는 것 여기

는 내가 지금까지 무엇을 가지고 섹션을 올바르게

도움을 주시면 감사하겠습니다. 제대로 작동하지 않지만, 당신이 보여주고 싶은 첫 번째 div, 예를 current를 들어, class 추가하려면 여기를 http://jsfiddle.net/mrfisherman2010/xM6Ft/1/

Answer 1

시도를 게시했습니다. 표시 할 때 class을 제거하고 다음 div에 추가하십시오. 예제 코드 :

$('.current').show(); 
$('.current').removeClass('current').next("div").addClass('current'); 

데모 :http://jsfiddle.net/xM6Ft/2/

업데이트

당신의 첫 번째 줄 변경할 수 있습니다 이전 DIV 숨기려면

$('.current').show().prev("div").hide(); 

데모 :http://jsfiddle.net/xM6Ft/4/

Answer 2

준비 함수에서 [name = toggler]에 클릭 핸들러를 바인딩합니다. 페이지로드시에는 그 이름을 가진 입력이 2 개 (1a의 경우)이므로, 1b의 라디오 버튼 중 하나를 클릭해도 아무 것도 일어나지 않습니다. 페이지의 모든 입력 (예 : class = "toggler")에 동일한 클래스를 추가하고 준비된 함수를

$(".toggler").click(function() { 
    //... 
});