我有十個這樣的按鈕和答案，每個按鈕和答案之間的唯一區別是答案：例子： <div class="showhim"> <button class="answerbtn" onclick="revealAnswersFunction()">Click/Tap To Reveal Answers:</button> <div class="showme" style="display:none">1D, 2C</div></div> <div class="showhim"> <button class="answerbtn" onclick="revealAnswersFunction()">Click/Tap To Reveal Answers:</button> <div class="showme" style="display:none">1A, 2D</div></div> <div class="showhim"> <button class="answerbtn" onclick="revealAnswersFunction()">Click/Tap To Reveal Answers:</button> <div class="showme" style="display:none">1B, 2B</div></div>現在我想要的是，如果用戶單擊一個按鈕，就會顯示相關的答案。目前，它正在這樣做，但有一個問題，它顯示所有答案，這不是我想要的。我想要它，以便根據我單擊的按鈕，它只顯示該按鈕的答案，而不會顯示其他答案。如何操作代碼來合并我猜測的某種軟循環來檢索已單擊的按鈕并顯示相應的答案并隱藏所有其他答案？var answers = document.getElementsByClassName("showme"); var revealAnswers = document.getElementsByClassName("answerbtn");function revealAnswersFunction() { if (answers.style.display === "none") { answers.style.display = "inline-block"; } else { answers.style.display = "none"; }}
3 回答
慕虎7371278
TA貢獻1802條經驗 獲得超4個贊
function revealAnswersFunction(e) {
var all =document.getElementsByClassName('showme');
for(let i=0;i<all.length;i++){
all[i].style.display='none';
}
var div = e.nextSibling.nextElementSibling;
div.style.display = "inline-block";
}
<div class="showhim">
<button class="answerbtn" onclick="revealAnswersFunction(this)">Click/Tap To Reveal Answers:</button>
<div class="showme" style="display:none">1D, 2C</div>
</div>
<div class="showhim">
<button class="answerbtn" onclick="revealAnswersFunction(this)">Click/Tap To Reveal Answers:</button>
<div class="showme" style="display:none">1A, 2D</div>
</div>
<div class="showhim">
<button class="answerbtn" onclick="revealAnswersFunction(this)">Click/Tap To Reveal Answers:</button>
<div class="showme" style="display:none">1B, 2B</div>
</div>
喵喵時光機
TA貢獻1846條經驗 獲得超7個贊
一個簡單的解決方案是在函數中使用索引：
<div class="showhim">?
? ? ? ? <button class="answerbtn" onclick="revealAnswersFunction(0)">Click/Tap To Reveal Answers:</button>
? ? <div class="showme" style="display:none">1D, 2C</div>
</div>
? <div class="showhim">?
? ? ? ? <button class="answerbtn" onclick="revealAnswersFunction(1)">Click/Tap To Reveal Answers:</button>
? ? <div class="showme" style="display:none">1A, 2D</div>
</div>
? <div class="showhim">?
? ? ? ? <button class="answerbtn" onclick="revealAnswersFunction(2)">Click/Tap To Reveal Answers:</button>
? ? <div class="showme" style="display:none">1B, 2B</div>
</div>
function revealAnswersFunction(index) {
? if (answers[index].style.display === "none") {
? ? answers[index].style.display = "inline-block";
? } else {
? ? answers[index].style.display = "none";
? }
}
在 HTML 中，我向onclick="revealAnswersFunction(0)" . 然后在函數中使用該索引來獲取要顯示的答案。
為了將來參考，當您調用它時document.getElementsByClassName()，它會返回一個數組，因此您將需要要修改的數組項的索引。
一個簡單的解決方案是在函數中使用索引：
<div class="showhim">?
? ? ? ? <button class="answerbtn" onclick="revealAnswersFunction(0)">Click/Tap To Reveal Answers:</button>
? ? <div class="showme" style="display:none">1D, 2C</div>
</div>
? <div class="showhim">?
? ? ? ? <button class="answerbtn" onclick="revealAnswersFunction(1)">Click/Tap To Reveal Answers:</button>
? ? <div class="showme" style="display:none">1A, 2D</div>
</div>
? <div class="showhim">?
? ? ? ? <button class="answerbtn" onclick="revealAnswersFunction(2)">Click/Tap To Reveal Answers:</button>
? ? <div class="showme" style="display:none">1B, 2B</div>
</div>
function revealAnswersFunction(index) {
? if (answers[index].style.display === "none") {
? ? answers[index].style.display = "inline-block";
? } else {
? ? answers[index].style.display = "none";
? }
}
在 HTML 中，我向onclick="revealAnswersFunction(0)" . 然后在函數中使用該索引來獲取要顯示的答案。
為了將來參考，當您調用它時document.getElementsByClassName()，它會返回一個數組，因此您將需要要修改的數組項的索引。
一個更簡潔的解決方案是使用事件偵聽器將事件添加onclick到 javascript 中的按鈕。
德瑪西亞99
TA貢獻1770條經驗 獲得超3個贊
首先使用hide()方法隱藏所有答案，然后更改當前答案的顯示屬性。
function revealAnswersFunction(e) {
$('.showme').hide();
e.target.nextElementSibling.style.display = 'inline-block';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="showhim">
<button class="answerbtn" onclick="revealAnswersFunction(event)">Click/Tap To Reveal Answers:</button>
<div class="showme" style="display:none">1D, 2C</div>
</div>
<div class="showhim">
<button class="answerbtn" onclick="revealAnswersFunction(event)">Click/Tap To Reveal Answers:</button>
<div class="showme" style="display:none">1A, 2D</div>
</div>
<div class="showhim">
<button class="answerbtn" onclick="revealAnswersFunction(event)">Click/Tap To Reveal Answers:</button>
<div class="showme" style="display:none">1B, 2B</div>
</div>
- 3 回答
- 0 關注
- 171 瀏覽
添加回答
舉報
0/150
提交
取消