基於單選按鈕點擊顯示和隱藏div

Question

我的html和jQuery代碼在這裏。這是一個非常簡單的測試，但它仍然無法工作..

這裏是HTML：

<p>Select a question to see the answer.</p> 
    <div id="questionArea" class="questionArea" > 
    Question 1 <input type="radio" id="question1" class="question" name="radioGroup1" /> 
    Question 2 <input type="radio" id="question2" class="question" name="radioGroup1" /> 
    Question 3 <input type="radio" id="question3" class="question" name="radioGroup1" /> 
    </div> 

    <div id="answerArea" class="answerArea"> 
    <div id="answer1" class="answer">First Answer</div> 
    <div id="answer2" class="answer">Second Answer</div> 
    <div id="answer3" class="answer">Third Answer</div> 
    </div> 

這裏是jQuery的：

$(document).ready(function() { 
    $(".answerArea").hide(); 
    $("input[$name='radioGroup1']").click(function() { 
      var answer = $(this).val(); 
      $(".answerArea").hide(); 
      $("#" + answer).show(); 
     }); 
    }); 
}); 

這裏是另一種方式來顯示/隱藏，雖然它不是一個好方法，但我只是想知道爲什麼它不能工作..

 $(document).ready(function() { 

      $("div.answerArea").hide(); 

       $('#question1').click(function() { 
        $('#answer2').hide('fast'); 
        $('#answer3').hide('fast'); 
        $('#answer1').show('fast'); 

       }); 

       $('#question2').click(function() { 

         $('#answer1').hide('fast'); 
         $('#answer3').hide('fast'); 
         $('#answer2').show('fast'); 

       }); 

        $('#question3').click(function() { 

         $('#answer1').hide('fast'); 
         $('#answer2').hide('fast'); 
         $('#answer3').show('fast'); 

       }); 


    }); 

Answer 1

$(".answerArea").hide();隱藏包含答案的父元素。如果父母隱藏，則不能顯示孩子。

我會用孩子們的指數做到這一點：

$(document).ready(function() { 
    $(".answer").hide(); 

    $(".question").click(function() { 
     $(".answer").hide().eq($(this).index()).show(); 
    }); 
}); 

這將隱藏所有的答案元素，然後顯示對應的問題之一。