javascript - 第二次点击后脚本执行问题

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% 执行，没有任何错误。因此，第一个问题被隐藏，新问题被附加到 .hiden_questions div 的 .visible_questions div 中。

第 2 次(以及第 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;

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

$(".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>