書(shū)接上文，接下來(lái)這部分，我們需要給右側(cè)的上/下一題等按鈕、題目選項(xiàng)ABC、左側(cè)的答題卡目錄區(qū)域綁定事件。

▌一、上/下一題切換
我們只需要改變當(dāng)前的 indexItem，然后刷新一下題目描述部分（在第二節(jié)中有詳細(xì)講解）的顯示即可。

而這里，提醒一點(diǎn)，我們需要判斷 indexItem 的范圍，應(yīng)該是從 0 到 題目總數(shù)-1，不能超出這個(gè)范圍，否則會(huì)因找不到結(jié)果而出錯(cuò)。
以下一題按鈕為例，代碼如下：

▌二、待查標(biāo)記顯示與切換
我們對(duì)于不太確定的題目，一般會(huì)做一個(gè)待查標(biāo)記，等所有題目答完后再仔細(xì)思考，這時(shí)，就需要設(shè)置待查標(biāo)志。

首先，我們需要判斷當(dāng)前題目是否被設(shè)置待查標(biāo)志了，然后顯示對(duì)應(yīng)的按鈕文字：

當(dāng)然，上面判斷是否被標(biāo)記的這部分，是直接寫(xiě)在刷新的函數(shù)中，不屬于我們的按鈕綁定事件。

接下來(lái)，我們就需要給按鈕綁定切換的事件。這部分也比較簡(jiǎn)單，只需要增/刪markAnswer 這個(gè) class 即可：

▌三、左側(cè)題目目錄

接下來(lái)就是左側(cè)各個(gè) li 的綁定事件。而其中比較困難的是，如何確定各個(gè) li 所對(duì)應(yīng)的題目編號(hào)，也就是下圖中箭頭兩側(cè)的數(shù)字如何轉(zhuǎn)換。

比如，從第二道大題開(kāi)始，第2個(gè) li 對(duì)應(yīng)的是第 6 題，對(duì)應(yīng)關(guān)系有些復(fù)雜 6 = 4 + 2，而第三道大題，計(jì)算步驟就更多了：7 = 4 +2 + 1，需要用公式去逐個(gè)計(jì)算。

這里，我取了一個(gè)巧，通過(guò) li 的祖元素（可以包括所有 li 的元素），獲取每個(gè) li 元素，并且，這時(shí) li 的序號(hào)與我們的題目編號(hào)是一一對(duì)應(yīng)的，因此，采用如下的代碼就可以完成綁定：

▌四、題目各選項(xiàng)勾選切換
之后，我們來(lái)看看右側(cè)題目各個(gè)選項(xiàng)的綁定事件。

與之前的點(diǎn)擊事件不同的是，單選、復(fù)選框的觸發(fā)事件，不是之前的點(diǎn)擊 onclick，應(yīng)該是當(dāng)值改變的 onchange 事件。而動(dòng)作就是將所有的 value 輸出到我們的「數(shù)據(jù)庫(kù)」中。
這里，需要注意的一個(gè)點(diǎn)是，如果題目是多選題或不定項(xiàng)（單選判斷使用也不影響），無(wú)論我們改變哪一個(gè)選項(xiàng)的勾選狀態(tài)，都需要重新將所有已/未勾選的值，寫(xiě)入到數(shù)據(jù)庫(kù)中。因?yàn)樵诤罄m(xù)計(jì)算得分時(shí)，我們是要按照考生寫(xiě)的答案中每個(gè)選項(xiàng)逐次判斷計(jì)算得分的，需要有特定的順序才可以。

因此，下面的這部分代碼，需要你仔細(xì)閱讀，弄清其中的邏輯與細(xì)節(jié)：

到這里，還沒(méi)結(jié)束，問(wèn)題來(lái)了：只有我們最開(kāi)始加載的界面有效，當(dāng)我們通過(guò)左側(cè)的題目錄或者上下按鈕切換時(shí)，這些選項(xiàng)的事件無(wú)法生效了。為什么呢？
這里需要說(shuō)明的是，不同于左側(cè)答題卡的 li 綁定，由于我們?cè)谇袚Q題目時(shí)，雖然 ID 可能還是那個(gè) ID，但頁(yè)面的元素（對(duì)象）已經(jīng)發(fā)生了變化，之前綁定的事件就不再生效了。
因此，我們需要在切換題目（點(diǎn)擊上/下一題的按鈕或者點(diǎn)擊左側(cè)的答題卡）后，重新綁定各個(gè)選項(xiàng)的按鈕點(diǎn)擊事件，又因?yàn)?，切換題目最終都會(huì)調(diào)用 refresh 界面刷新函數(shù)，我們只需要在 refresh 函數(shù)中加入調(diào)用即可：

▌五、是否已回答
在上面，我們?cè)O(shè)置了「待查標(biāo)記」，但相信你也看到了，在界面左下角還有其他狀態(tài)的顯示方式：

首先，我們需要理清這四者的顯示邏輯：

• 未做與已做是互斥的
  

• 待查優(yōu)先于未做/已做
  

• 當(dāng)前的陰影屬性?xún)?yōu)先于其他標(biāo)識(shí)

因此，我們可以在優(yōu)先級(jí)較高的 class 中加入強(qiáng)調(diào)語(yǔ)句 !important：

而當(dāng)前狀態(tài)的陰影與邊框樣式與其他狀態(tài)不沖突，不用特殊處理。
之后在答題過(guò)程中，我們只需要對(duì) class 增/刪/改就可以完成狀態(tài)的切換了。
但這里又出現(xiàn)了一個(gè)新問(wèn)題：當(dāng)前與待查非常容易判斷，而未做與已做如何判斷呢？?jī)H僅是看考生有沒(méi)有填寫(xiě)作答嗎？

這里給出我的思路，如果是單選、判斷或不定項(xiàng)，作答即代表已答，而對(duì)于多選題來(lái)說(shuō)，必須有兩個(gè)或兩個(gè)以上的答案才算已作答，或者也可以理解為，如果為空或者有且僅有一個(gè)選項(xiàng)，都屬于未答狀態(tài)。

接下來(lái)只需要調(diào)用此函數(shù)即可。

首先，在頁(yè)面開(kāi)始加載時(shí)，我們就需要對(duì)左側(cè)的答題卡區(qū)域設(shè)置不同的標(biāo)記狀態(tài)：

其次，在我們切換選項(xiàng)的勾選狀態(tài)時(shí)，左側(cè)的區(qū)域也需要切換未做/已做狀態(tài)。

最后，對(duì)于顯示/移除當(dāng)前狀態(tài)，我們只需要在 refresh 函數(shù)中做對(duì)應(yīng)處理即可：

▌最后
好了，答題部分的代碼到這里就結(jié)束了，這個(gè)項(xiàng)目已經(jīng)陸續(xù)更新了 20,000 字的文章，下次更新如何計(jì)算得分部分，如果篇幅允許，會(huì)加上細(xì)節(jié)設(shè)計(jì)部分，并給出源代碼。