1

ユーザーがラジオボタンのリストから正しい答えを選択する必要がある演習を作成しようとしています。「紹介」ラジオボタンは、ユーザーが最初の答えが正しいと思わない場合に、より多くのオプションを表示するだけです。このJavaScriptコードは、独自の.jsファイルから実行され、.htmlページにリンクされています。しかし、ラジオボタン（入力）を押しても何も起こらないようで、問題を見つけることができません。誰かが何かを見ますか？

注：フィードバックセクションはまだ入れていませんが、

Javascriptコードは次のとおりです。

//setup client case questions
    $('.clientCase input').click(function(){
        var multipleChoiceElement$ = $(this).closest('.clientCase');

        if(this.value!=="2"){ //If a button that isn't the referral is clicked
            multipleChoiceElement$.find('.feedback').show();
            multipleChoiceElement$.find('input').prop('disabled',true);
        }

        if(this.value == "1"){ //the correct answer
            multipleChoiceElement$.find('.answeredCorrectly').show();
        }
        else if(this.value=="2"){//value of 2 means its the referral
            multipleChoiceElement$.find('#clientCaseIS').show();
        }
        else{//the incorrect answer
            multipleChoiceElement$.find('.answeredIncorrectly').show();
        }       
});

このセクションに関連するHTMLコードは次のとおりです。

  <!-- Start of multiple choice question -->
       <div class="clientCase">
         <ul class="outline">
         <div id="clientCasePIL"><strong>PIL: Primary Inspection Line</strong>
           <div class="fancyBox">
            <li><strong>1. Admission</strong></li>
            <ul style="list-style-type:none">
             <li><div class="answerOption"><label for="question1A">Verbal</label></div>
              <div class="inputAndIdContainer"><input type="radio" name="question1" value="0" id="question1A"> A.</div></li>
             <li><div class="answerOption">
               <label for="question1B">Stamp</label></div>
              <div class="inputAndIdContainer"><input type="radio" name="question1" value="1" id="question1B"> B.</div></li>
              <li><div class="answerOption">
                <label for="question1C">Document</label></div>
              <div class="inputAndIdContainer"><input type="radio" name="question1" value="0" id="question1C"> C.</div></li><p/>
             <li><div class="answerOption">
               <label for="PILRefusal"><strong>Refusal</strong></label></div>
              <div class="inputAndIdContainer"><input type="radio" name="question1" value="0" id="PILRefusal"> 2.</div></li>
              <li><div class="answerOption">
                <label for="ISReferral"><strong>Referral</strong></label></div>
              <div class="inputAndIdContainer"><input type="radio" name="question1" value="2" id"ISReferral"> 3.</div></li></ul>
             </div>
            </div>

        <div id="clientCaseIS"><strong>Immigration Secondary</strong>
            <div class="fancyBox">
            <li><strong>1. Admission</strong></li>
            <ul style="list-style-type:none">
             <li><div class="answerOption"><label for="question1D">Verbal</label></div>
              <div class="inputAndIdContainer"><input type="radio" name="question1" value="0" id="question1D"> A.</div></li>
             <li><div class="answerOption">
               <label for="question1E">Stamp</label></div>
              <div class="inputAndIdContainer"><input type="radio" name="question1" value="0" id="question1E">
              B.</div></li>
              <li><div class="answerOption">
                <label for="question1F">Document</label></div>
              <div class="inputAndIdContainer"><input type="radio" name="question1" value="0" id="question1F">
              C.</div></li><p/>
              <li><div class="answerOption">
               <label for="ISRefusal"><strong>Refusal</strong></label></div>
              <div class="inputAndIdContainer"><input type="radio" name="question1" value="0" id="ISRefusal"> 2.</div></li></ul>
            </div>
          </div>
        </ul>

        <div class="feedback">
               <div class="answeredCorrectly">Correct</div>
               <div class="answeredIncorrectly">Incorrect</div>
                  <div class="answer">
                  <strong>Answer:</strong> The feedback goes here
          </div>
       </div>
        </div>
4

1 に答える 1

1

$(document).ready();クリック ハンドラが DOM の要素にアタッチされるように、関数を でラップすることをお勧めします。

$(document).ready(function() {

    $('.clientCase input').click(function(){
        // etc..
    });    

});

それ以外の場合は、正しい初期スタイルを持っている限り、すべてが期待どおりに機能しているようです.

于 2012-05-23T19:04:22.137 に答える