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）

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

Answer 1

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

<强>第一：这个HTML并不完全有效....即使它可能有效。
现代浏览器＆＃34; patch＆＃34; 这个。
或者也许你在剪切＆＃39; n粘贴时有点快......例如

无论如何，我在每个问题<tr>/</tr>的第一行添加了一个丢失的<table>包装器。
我还在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>中，而不是在其他任何元素之前或之后，以防止弄乱那些数。

在一个div中显示查询的前5个结果，在另一个div中显示

1 个答案: