显示来自查询的前5个结果在一个div中，并在另一个div中休息

Question

我正在开发CodeIgniter上的测验应用程序。
随机选择25个问题从数据库中挑选出来并显示给用户。

下面是我的代码：

<?php 
     $i = 1;    
     echo form_open('Menu/submit_ans', array('name' => 'quiz')); 
     foreach ($quiz_array as $q){?> 
     <center class="Qcounter"> 
     <div class="col-lg-12"> 

     <h3>Question No. <?php echo $i?> </h3> 
     <br> 
     <table> 
     <tr> 
     <td colspan="2"><?php echo $q->ques;?></td> 
     <input hidden name="qid[]" type="text" value="<?php echo $q->qid;?>"> 
     <input hidden name="uid[]" type="text" value="<?php echo $user['id'];?>"> 
     </tr> 
     <tr> 
     <td><input type="radio" name="ans[<?php print $i; ?>]" value="1"></td> 
     <td><?php echo $q->ans_1;?></td> 
     </tr> 
     <tr> 
     <td><input type="radio" name="ans[<?php print $i; ?>]" value="2"></td> 
     <td><?php echo $q->ans_2;?></td> 
     </tr> 
     <tr> 
     <td><input type="radio" name="ans[<?php print $i; ?>]" value="3"></td> 
     <td><?php echo $q->ans_3;?></td> 
     </tr> 
     <tr> 
     <td><input type="radio" name="ans[<?php print $i; ?>]" value="4"></td> 
     <td><?php echo $q->ans_4;?></td> 
     </tr> 
     </table> 

     </div> 
     </center> 
     <?php 
      $i++; 

     } 

     ?> 

     <button class="btn btn-success" type="submit">Submit!</button></a> 
     <?php echo form_close();?> 
     <button id="btn_next">Next</button> 

我想在一个DIV显示前10个结果。
当用户点击下一个按钮时，它会显示下一个10个结果。
（隐藏当前的股利和显示下一个）

我只是想知道我怎么可以打破的结果，并限制每格10个问题。

Answer 1

基于您的HTML（从PHP循环创建）。

第一个： 这个HTML是不完全有效的....即使它可能工作。
现代浏览器“补丁”这个。
或者，也许你是对cut'n糊的例子有点快...

反正我加在每一个问题的<table>你的第一行缺少<tr>/</tr>包装。
我还在该PHP循环中添加了缺少的</div>和</center>。

<?php 
    $i = 1; 

    foreach ($quiz_array as $q){ ?> 
     <center class="Qcounter"> 
      <div class="col-lg-12"> 
       <h3>Question No. <?php echo $i?> </h3> 
       <br> 
       <table> 
        <tr><!-- added --> 
         <td colspan="2"><?php echo $q->ques;?></td> 
         <input hidden type="text" value="<?php echo $q->qid;?>"> 
        </tr><!-- added --> 
        <tr> 
         <td><input type="radio" name="ans[<?php print $i; ?>]" value="1"></td> 
         <td><?php echo $q->ans_1;?></td> 
        </tr> 
        <tr> 
         <td><input type="radio" name="ans[<?php print $i; ?>]" value="2"></td> 
         <td><?php echo $q->ans_2;?></td> 
        </tr> 
        <tr> 
         <td><input type="radio" name="ans[<?php print $i; ?>]" value="3"></td> 
         <td><?php echo $q->ans_3;?></td> 
        </tr> 
        <tr> 
         <td><input type="radio" name="ans[<?php print $i; ?>]" value="4"></td> 
         <td><?php echo $q->ans_4;?></td> 
        </tr> 
       </table> 
      </div><!-- added --> 
     </center><!-- added --> 

     <?php 
     $i++; 
    } 
?> 

所以，现在这个是一致的...
为什么不使用<center>标签作为一个包装指望jQuery的边吗？

我给它添加了一个类：class="Qcounter"它只会被用作jQuery选择器。

该函数为给定数量的元素设置了display onload。
然后设置someNextBtn按钮ID的点击处理程序。

// Define the amount of question to show. 
var showNquestion = 5; 

// onload... 
$(".Qcounter").each(function(){ 

    // Question indexes 0 to showNquestion will show. 
    if($(this).index() < showNquestion){ 
     $(this).css({"display":"block"}); 
    }else{ 
     $(this).css({"display":"none"}); 
    } 
}); 

// On "Next" button click. 
$("#someNextBtn").click(function(){ 

    var lastShown=0; 

    // Find the last question index shown. 
    $(".Qcounter").each(function(){ 
     if($(this).css("display") == "block"){ 
      lastShown = $(this).index(); 
     } 
    }); 

    $(".Qcounter").each(function(){ 

     //Question indexes "last+1" to "last+showNquestion" will show. 
     if(($(this).index() > lastShown) && ($(this).index() < lastShown+showNquestion)){ 
      $(this).css({"display":"block"}); 
     }else{ 
      $(this).css({"display":"none"}); 
     } 
    }); 

    if(lastShown == $(".Qcounter").length){ 
     alert("You answered all questions."); 
    } 
}); 

注意是<center>元素为他们.index()检查。
因此它被指示在一个<div>内包含你的整套问题，而不需要任何其他的元素，在之前或之后，以防止搞乱这个计数。