function showQuestion(questionAndAnswers) {
const shuffledAnswers = _.shuffle(questionAndAnswers.answers);
questionTag.innerText = questionAndAnswers.question;
shuffledAnswers.forEach(({ text, correct }, i) => {
answerTag[i].innerText = text;
answerTag[i].dataset.correct = correct;
});
}
document.querySelectorAll(".answer").forEach((answer) => {
answer.addEventListener("click", (event) => {
if (event.target.dataset ) {
answer.style.border = "1.5px solid"
}
});
});
function nextQuestion() {
const nextIndex = currentQuestionIndex 1;
if (nextIndex <= myQuestions.length - 1) {
showQuestion(myQuestions[nextIndex]);
currentQuestionIndex = nextIndex;
} else {
end.style.visibility = "visible";
nxt_question_btn.style.visibility = "hidden";
}
}基本上，在這個測驗應用程式中，我有 4 個答案按鈕，一旦你點擊一個答案，它就會使邊框變黑。我面臨的問題是，一旦我按下下一個問題，它會加載另一個帶有 4 個不同答案的問題，但其中一個按鈕的邊框仍為黑色。加載另一個問題后，如何重置它？和額外的問題，如果可以的話，我怎樣才能每個問題一次只選擇一個按鈕？
uj5u.com熱心網友回復：
沒有“重置”，因為沒有默認設定，您只需手動撤消之前所做的操作，即完全洗掉邊框：
answer.style.border = "none";
要單獨選擇每個按鈕，您必須根據迭代之類的內容為每個按鈕分配一個 ID，而不是嘗試通過共享類選擇它們
uj5u.com熱心網友回復：
這是一個很難的問題，不知道以前的樣式是什么就沒有簡單的答案，所以最好將樣式的先前值存盤在記憶體中，并在加載下一個問題后將樣式重置為先前的值
// a variable declared somewhere in common scope
let prevBorder
// "backup" the old value when you want to mark the answer as "selected"
prevBorder = element.styles.border
// restore to the initial value when you want to reset the styles
element.styles.border = prevBorder
uj5u.com熱心網友回復：
也許您正在尋找css:initial 房產？
初始 CSS 關鍵字將屬性的初始（或默認）值應用于元素。它可以應用于任何 CSS 屬性。這包括 CSS 簡寫 all，使用它 initial 可以將所有 CSS 屬性恢復到它們的初始狀態。
或者您可以添加類并使用 classList.toggle()在它們之間切換。
我沒有您的 html 代碼和完整代碼，因此無法完全幫助您，但這是一個可以幫助您實作代碼的示例：
document.querySelectorAll('button').forEach(item => {
item.addEventListener('click', function() {
item.style.border = '10px solid black'
document.querySelectorAll('button').forEach(i => {
if (i != item)
i.style.border = "initial"
})
})
})<button>Click</button>
<button>Click</button>
<button>Click</button>
<button>Click</button>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/419454.html
標籤：