手把手教你打造一个考试刷题系统（四）——题目切换与标记状态动作绑定

书接上文，接下来这部分，我们需要给右侧的上/下一题等按钮、题目选项ABC、左侧的答题卡目录区域绑定事件。

▌一、上/下一题切换
我们只需要改变当前的 indexItem，然后刷新一下题目描述部分（在第二节中有详细讲解）的显示即可。

而这里，提醒一点，我们需要判断 indexItem 的范围，应该是从 0 到 题目总数-1，不能超出这个范围，否则会因找不到结果而出错。
以下一题按钮为例，代码如下：

▌二、待查标记显示与切换
我们对于不太确定的题目，一般会做一个待查标记，等所有题目答完后再仔细思考，这时，就需要设置待查标志。

首先，我们需要判断当前题目是否被设置待查标志了，然后显示对应的按钮文字：

当然，上面判断是否被标记的这部分，是直接写在刷新的函数中，不属于我们的按钮绑定事件。

接下来，我们就需要给按钮绑定切换的事件。这部分也比较简单，只需要增/删markAnswer 这个 class 即可：

▌三、左侧题目目录

接下来就是左侧各个 li 的绑定事件。而其中比较困难的是，如何确定各个 li 所对应的题目编号，也就是下图中箭头两侧的数字如何转换。

比如，从第二道大题开始，第2个 li 对应的是第 6 题，对应关系有些复杂 6 = 4 + 2，而第三道大题，计算步骤就更多了：7 = 4 +2 + 1，需要用公式去逐个计算。

这里，我取了一个巧，通过 li 的祖元素（可以包括所有 li 的元素），获取每个 li 元素，并且，这时 li 的序号与我们的题目编号是一一对应的，因此，采用如下的代码就可以完成绑定：

▌四、题目各选项勾选切换
之后，我们来看看右侧题目各个选项的绑定事件。

与之前的点击事件不同的是，单选、复选框的触发事件，不是之前的点击 onclick，应该是当值改变的 onchange 事件。而动作就是将所有的 value 输出到我们的「数据库」中。
这里，需要注意的一个点是，如果题目是多选题或不定项（单选判断使用也不影响），无论我们改变哪一个选项的勾选状态，都需要重新将所有已/未勾选的值，写入到数据库中。因为在后续计算得分时，我们是要按照考生写的答案中每个选项逐次判断计算得分的，需要有特定的顺序才可以。

因此，下面的这部分代码，需要你仔细阅读，弄清其中的逻辑与细节：

到这里，还没结束，问题来了：只有我们最开始加载的界面有效，当我们通过左侧的题目录或者上下按钮切换时，这些选项的事件无法生效了。为什么呢？
这里需要说明的是，不同于左侧答题卡的 li 绑定，由于我们在切换题目时，虽然 ID 可能还是那个 ID，但页面的元素（对象）已经发生了变化，之前绑定的事件就不再生效了。
因此，我们需要在切换题目（点击上/下一题的按钮或者点击左侧的答题卡）后，重新绑定各个选项的按钮点击事件，又因为，切换题目最终都会调用 refresh 界面刷新函数，我们只需要在 refresh 函数中加入调用即可：

▌五、是否已回答
在上面，我们设置了「待查标记」，但相信你也看到了，在界面左下角还有其他状态的显示方式：

首先，我们需要理清这四者的显示逻辑：

• 未做与已做是互斥的
  

• 待查优先于未做/已做
  

• 当前的阴影属性优先于其他标识

因此，我们可以在优先级较高的 class 中加入强调语句 !important：

而当前状态的阴影与边框样式与其他状态不冲突，不用特殊处理。
之后在答题过程中，我们只需要对 class 增/删/改就可以完成状态的切换了。
但这里又出现了一个新问题：当前与待查非常容易判断，而未做与已做如何判断呢？仅仅是看考生有没有填写作答吗？

这里给出我的思路，如果是单选、判断或不定项，作答即代表已答，而对于多选题来说，必须有两个或两个以上的答案才算已作答，或者也可以理解为，如果为空或者有且仅有一个选项，都属于未答状态。

接下来只需要调用此函数即可。

首先，在页面开始加载时，我们就需要对左侧的答题卡区域设置不同的标记状态：

其次，在我们切换选项的勾选状态时，左侧的区域也需要切换未做/已做状态。

最后，对于显示/移除当前状态，我们只需要在 refresh 函数中做对应处理即可：

▌最后
好了，答题部分的代码到这里就结束了，这个项目已经陆续更新了 20,000 字的文章，下次更新如何计算得分部分，如果篇幅允许，会加上细节设计部分，并给出源代码。