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

Question

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

3

我是一个有用的助手，可以将文本翻译成中文。

我有一个简单的页面，采用问题/答案布局。基本上，当用户点击他选择的答案时，当前问题会被隐藏，然后从隐藏的问题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中。

第二（和n次单击-第三次，第四次等）单击仅部分执行上述脚本。在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(){

这些例子导致了同样的问题。提前感谢任何帮助。

- Edgars

1

这对我来说看起来像是一个 XY 问题。你所说的“部分执行”是什么意思？ - Suresh Atta

1

抱歉，我不太明白问题出在哪里。这是一个笔记本 - http://codepen.io/anon/pen/zZxrab 这里应该发生什么？ - Michael Coker

@sᴜʀᴇsʜᴀᴛᴛᴀ 部分执行意味着一些代码行对每个更改事件执行，但其他代码行仅在第一次更改事件被触发时执行。 - Edgars

@MichaelCoker，当更改元素被触发时，它应该显示下一个问题，当没有其他问题时，它应该执行脚本。 - Edgars

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- caramba · Accepted Answer

检查

。

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>