php - 在一个 div 中显示查询的前 5 个结果，在另一个 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 个结果。
(隐藏当前 div 并显示下一个)

我只是想知道如何打破结果并将每个 div 限制为 10 个问题。

Answer 1

基于您的 HTML(从 PHP 循环创建)。

第一:此 HTML 并不完全有效......即使它可能有效。
现代浏览器对此进行“修补”。
或者也许您在示例中剪切粘贴的速度有点快...

无论如何，我添加了一个缺失的 <tr>/</tr>每个问题的第一行的包装 <table> .
我还添加了缺失的 </div>和</center>在那个 PHP 循环中。

<?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> 中。之前或之后没有任何其他元素，以防止困惑计数。