1

ここに私の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');

                 });


    });
4

1 に答える 1

3

$(".answerArea").hide();回答を含む親要素を非表示にします。親が非表示の場合、子を表示できません。

私はそれを行うために子のインデックスを使用します:

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

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

これにより、すべての回答要素が非表示になり、質問に対応する要素が表示されます。

于 2013-02-24T21:57:32.193 に答える