输入对象出现问题

Trouble with input objects

本文关键字:问题 对象 输入      更新时间:2023-09-26

我正在尝试创建一个练习,用户必须从单选按钮列表中选择正确的答案。如果用户认为初始答案不正确,则"推荐"单选按钮只是提出更多选项。此 JavaScript 代码从其自己的.js文件运行,并链接到.html页面。但是,当我按下任何单选按钮(输入(时,似乎没有任何反应,我找不到问题。有人看到什么吗?

注意:我还没有把反馈部分放进去,bu

以下是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="answerswerOption"><label for="question1A">Verbal</label></div>
              <div class="inputAndIdContainer"><input type="radio" name="question1" value="0" id="question1A"> A.</div></li>
             <li><div class="answerswerOption">
               <label for="question1B">Stamp</label></div>
              <div class="inputAndIdContainer"><input type="radio" name="question1" value="1" id="question1B"> B.</div></li>
              <li><div class="answerswerOption">
                <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="answerswerOption">
               <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="answerswerOption">
                <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="answerswerOption"><label for="question1D">Verbal</label></div>
              <div class="inputAndIdContainer"><input type="radio" name="question1" value="0" id="question1D"> A.</div></li>
             <li><div class="answerswerOption">
               <label for="question1E">Stamp</label></div>
              <div class="inputAndIdContainer"><input type="radio" name="question1" value="0" id="question1E">
              B.</div></li>
              <li><div class="answerswerOption">
                <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="answerswerOption">
               <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="answersweredCorrectly">Correct</div>
               <div class="answersweredIncorrectly">Incorrect</div>
                  <div class="answerswer">
                  <strong>Answer:</strong> The feedback goes here
          </div>
       </div>
        </div>
您可能

希望将函数包装在$(document).ready();中,以便将单击处理程序附加到 DOM 中的元素:

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

否则,只要您具有正确的初始样式,一切似乎都会按预期工作。

  • 演示