在一个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并显示下一个）

我只想知道我如何打破结果，并限制每个分区10个问题。

Answer 1

基于HTML（从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++;
    }
?>

所以现在这是一致的
为什么不使用

我向它添加了一个类：class=“Qcounter”，它将仅用作jQuery选择器。

该函数为给定数量的元素设置displayonload
然后为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.");
    }
});

注意