在测验应用程序中隐藏最后一个测验的下一个按钮

Question

我正在使用PHP制作测验应用程序。现在问题甚至是它显示下一个按钮的最后一个问题，如图像

所示

由于从db动态提取的问题，每个问题都没有页面。所以我无法指定它应该在什么时候隐藏下一个按钮（如果我有1000个问题怎么办）。我试过JavaScript。它似乎没有安静。

更新 Source code

Answer 1

演示：http://jsfiddle.net/e4Ny6/2/

使用

var numQuestions,
    navs;
function init() {
  cd();
  numQuestions = document.getElementsByClassName("qButton").length;
  navs = document.getElementsByClassName('navbutton');
  show(0);
}

function show(i) {
    document.getElementsByClassName("current")[0].className="qButton";
    document.getElementsByClassName("active")[0].className="qPanel";

    document.getElementsByClassName("qPanel")[i].className+=" active";
    document.getElementsByClassName("qButton")[i].className+=" current";

    navs[0].style.display = i===0 ? 'none' : '';
    navs[1].style.display = i===numQuestions-1 ? 'none' : '';

    currentQuestion=i;
}

...而不是您的功能init和show。

<强> Offtopic ：

如果您想提高效果，请将所有document.getElementsByClassName次调用存储在init()内的变量中。这样你只需要做一次那些昂贵的电话。

Answer 2

如果从数据库动态查询问题，结果集的大小应该是您的测验中显示的问题数量。然后，您可以使用javascript检查问题编号是否等于总问题的数量。如果不是，您可以显示下一个问题按钮。如果是，则用户在最后一个问题上，您不应该显示该按钮。

Answer 3

我会尝试一下，但是因为我在工作而你的源代码没有任何承诺......好吧，不是立即透明。

1）在navbuttons中添加一个额外的类或id：

<a id='previousbutton' class='navbutton' onclick='nav(-1)'>&laquo; Previous Question</a>
<a id='nextbutton' class='navbutton' onclick='nav(1)'>Next Question &raquo;</a>

2）加载页面以检查索引时if函数末尾的简单show语句

var cnt = document.getElementsByClassName("qButton").length-1;

if(i === cnt){
    document.getElementById('nextbutton').style.display = 'none';
} else {
    document.getElementById('nextbutton').style.display = 'block';
}

如果您愿意，可以详细说明，但这就是一般的想法。

Answer 4

我不完全确定你的数据库结构，所以很难测试，但我相信一个子查询来获取每个测验的最后一个id会得到你所需要的。

SELECT questions.*,
/* Add subquery to get last id */
(SELECT MAX(qid) FROM questionsforquiz WHERE questionsforquiz.quizId = $quizId) as last_id
FROM questions
JOIN questionsforquiz 
ON questions.qid = questionsforquiz.qid
WHERE questionsforquiz.quizId = $quizId
ORDER BY RAND()

现在您只需检查当前问题的qui是否为MAX(qid)，如果是，请停用导航按钮。

if($qId == $last_id) {
    // print disabled nav button
} else {
    // print active nav button
}