顯示來自查詢的前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>內包含你的整套問題，而不需要任何其他的元素，在之前或之後，以防止搞亂這個計數。