Question

我有简单的页面，有问题/答案布局。基本上，当用户点击他选择的答案时，当前问题被隐藏，下一个问题从隐藏的问题div中获取然后显示，等等。没有包含Ajax。简单的HTML和Jquery。

我的HTML

    <div class="visible_questions">

       <div id="question_block_74">

            <h1> Question is ? </h1>

             <label>
              <div class="question-take">
                  <input type="radio" class="practise_answer_radio_btn" name="74" value="205">
                  1st answer
               </div>
             </label>

              <label>
              <div class="question-take">
                  <input type="radio" class="practise_answer_radio_btn" name="74" value="205">
                  2nd answer
               </div>
             </label>

       </div>
    </div>



<div class="hiden_questions" style="display:none;">


   <div id="question_block_75" class="blocks_f">
          <div class="question-take element">
             <p> 2nd question </p>
          </div>

            <label>
              <div class="question-take">
                  <input type="radio" class="practise_answer_radio_btn" name="75" value="207">
                   1st answer for 2nd question 
              </div>
            </label>

           <br>


            <label>

              <div class="question-take">
                  <input type="radio" class="practise_answer_radio_btn" name="75" value="208">
                   2nd answer for 2nd question . 

              </div>

            </label>



     </div>

     <div id="question_block_76" class="blocks_f">
             ==//==
             The same type of structure here
     </div>

</div>

我的剧本：

$(".practise_answer_radio_btn").change(function(){

         console.log("message just for testing");

         var name = $(this).attr('name');

         $("#question_block_" + name).hide();

         var div_elements =  $(".hiden_questions .blocks_f").length;         

         $(".hiden_questions .blocks_f:first-child").appendTo(".visible_questions");

            if (div_elements == 0){

               alert("End of the questions!");
            }

});

问题描述：

第一次点击：当我第一次点击.practise_answer_radio_btn按钮时，上面显示的脚本执行100％没有任何错误。因此隐藏了第一个问题，并在.visible_questions div的.hiden_questions div中添加了新问题。

第二次（和n点击 - 第3，第4等）点击仅部分执行上面的脚本。 Chrome调试控制台中未显示任何错误。在这里，我将分解部分有效的脚本和不可用的脚本。

不起作用：

        console.log("message just for testing");

        if (div_elements == 0){   // when div_elements == 0 then this code doesn't execute

               alert("End of the questions!");
        }

是否有效（至少它看起来有效，因为下一个问题会按原样显示）：

         var name = $(this).attr('name');

         $("#question_block_" + name).hide();

         var div_elements =  $(".hiden_questions .blocks_f").length;         

         $(".hiden_questions .blocks_f:first-child").appendTo(".visible_questions");

我尝试了什么：

$(document).on('change','.practise_answer_radio_btn',function(){

$("body").on('change','.practise_answer_radio_btn',function(){

$(".practise_answer_radio_btn").change(function(){

这些例子导致了同样的问题。

提前感谢您的帮助。

Answer 1

检查

var div_elements =  $(".hiden_questions .blocks_f").length;

将问题从隐藏块移动到可见块后

。

$(".practise_answer_radio_btn").change(function(){

       console.log("message just for testing");

       var name = $(this).attr('name');

       $("#question_block_" + name).hide();

       $(".hiden_questions .blocks_f:first-child").appendTo(".visible_questions");
       
       var div_elements =  $(".hiden_questions .blocks_f").length;
       
console.log('questions left: ', div_elements);

          if (div_elements == 0){

             alert("End of the questions!");
          }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="visible_questions">

     <div id="question_block_74">

          <h1> Question is ? </h1>

           <label>
            <div class="question-take">
                <input type="radio" class="practise_answer_radio_btn" name="74" value="205">
                1st answer
             </div>
           </label>

            <label>
            <div class="question-take">
                <input type="radio" class="practise_answer_radio_btn" name="74" value="205">
                2nd answer
             </div>
           </label>

     </div>
  </div>



<div class="hiden_questions" style="display:none;">


 <div id="question_block_75" class="blocks_f">
        <div class="question-take element">
           <p> 2nd question </p>
        </div>

          <label>
            <div class="question-take">
                <input type="radio" class="practise_answer_radio_btn" name="75" value="207">
                 1st answer for 2nd question 
            </div>
          </label>

         <br>


          <label>

            <div class="question-take">
                <input type="radio" class="practise_answer_radio_btn" name="75" value="208">
                 2nd answer for 2nd question . 

            </div>

          </label>



   </div>

   <div id="question_block_76" class="blocks_f">
           ==//==
           The same type of structure here
   </div>

</div>

第二次单击后脚本执行问题

1 个答案: