jquery - 根据单选按钮单击显示和隐藏 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(); 隐藏包含答案的父元素。如果父级被隐藏，则无法显示子级。

我会使用 children 的索引来做到这一点:

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

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

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