我正在 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 个问题。
最佳答案
基于您的 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>
中。之前或之后没有任何其他元素,以防止困惑计数。
关于php - 在一个 div 中显示查询的前 5 个结果,在另一个 div 中显示其余结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40472870/