我有十個(gè)這樣的按鈕和答案，每個(gè)按鈕和答案之間的唯一區(qū)別是答案：例子： <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>現(xiàn)在我想要的是，如果用戶單擊一個(gè)按鈕，就會顯示相關(guān)的答案。目前，它正在這樣做，但有一個(gè)問題，它顯示所有答案，這不是我想要的。我想要它，以便根據(jù)我單擊的按鈕，它只顯示該按鈕的答案，而不會顯示其他答案。如何操作代碼來合并我猜測的某種軟循環(huán)來檢索已單擊的按鈕并顯示相應(yīng)的答案并隱藏所有其他答案？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貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超4個(gè)贊
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>
喵喵時(shí)光機(jī)
TA貢獻(xiàn)1846條經(jīng)驗(yàn) 獲得超7個(gè)贊
一個(gè)簡單的解決方案是在函數(shù)中使用索引：
<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)" . 然后在函數(shù)中使用該索引來獲取要顯示的答案。
為了將來參考，當(dāng)您調(diào)用它時(shí)document.getElementsByClassName()，它會返回一個(gè)數(shù)組，因此您將需要要修改的數(shù)組項(xiàng)的索引。
一個(gè)簡單的解決方案是在函數(shù)中使用索引：
<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)" . 然后在函數(shù)中使用該索引來獲取要顯示的答案。
為了將來參考，當(dāng)您調(diào)用它時(shí)document.getElementsByClassName()，它會返回一個(gè)數(shù)組，因此您將需要要修改的數(shù)組項(xiàng)的索引。
一個(gè)更簡潔的解決方案是使用事件偵聽器將事件添加onclick到 javascript 中的按鈕。
德瑪西亞99
TA貢獻(xiàn)1770條經(jīng)驗(yàn) 獲得超3個(gè)贊
首先使用hide()方法隱藏所有答案，然后更改當(dāng)前答案的顯示屬性。
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 關(guān)注
- 160 瀏覽
添加回答
舉報(bào)
0/150
提交
取消