基于单选按钮点击显示和隐藏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(); 
    }); 
}); 

这将隐藏所有的答案元素，然后显示对应的问题之一。