在Blogger中，基于使用javascript的按鈕單擊隱藏/顯示測驗答案

我在博客上有一個測驗博客/網站。為了顯示問題的答案，我有以下 html 代碼：

<button class="acc">Show Answer</button>
<div class="pnl">
  <p>Correct Answer</p>
</div>

<button class="acc">Show Answer</button>
<div class="pnl">
  <p>Correct Answer</p>
</div>

<button class="acc">Show Answer</button>
<div class="pnl">
  <p>Correct Answer</p>
</div>

像這樣的JavaScript：

<script type='text/javascript'>
     
//<![CDATA[ 
     var acc = document.getElementsByClassName("acc");
     var i;
    for (i = 0; i < acc.length; i  ) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var pnl = this.nextElementSibling;
    if (pnl.style.display === "block") {
      pnl.style.display = "none";
    } else {
      pnl.style.display = "block";
    }
  });
}
    //]]>
 
</script>

像這樣的CSS：

.acc {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}
.active, .acc:hover {
  background-color: #ccc; 
} 
.pnl {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

如果有人單擊所有按鈕，則這些按鈕充當切換按鈕，而不是顯示一個答案，然后當單擊下一個按鈕時，隱藏前一個答案并在其位置顯示新答案。需要更改哪些內容才能啟用此功能？

謝謝

uj5u.com熱心網友回復：

1. 移除按鈕。

2. 在每個上面添加以下內容 .pnl

   <!-- #ids must be unique so btn* = btn1, btn2, etc -->
   <!-- [for] of label must match #id of input -->
   <input id='btn*' class="acc" name='acc' type='radio' hidden>
   <label for='btn*'>Show Answer</label>

• 說明：如果表單控制元件有一個并且標簽有一個匹配，則標簽和表單控制元件（例如<input>，，<select>等）可以相互關聯。如果一個被點擊、檢查等，那么另一個也會這樣做。#id[for]

3. 添加以下 CSS：

     .acc:checked label .pnl {
        display: block
      }

• 說明：如果檢查了輸入.pnl，則輸入前面的標簽前面的那個。請注意，當一組單選按鈕共享一個時，一次[name]只能檢查一個。此外，單選按鈕是隱藏的，因此看起來標簽是唯一與用戶互動的標簽。

.acc {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active,
.acc:hover {
  background-color: #ccc;
}

.pnl {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

.acc:checked label .pnl {
  display: block
}

label {
  display: block
}

<input id='btn1' class="acc" name='acc' type='radio' hidden>
<label for='btn1'>Show Answer</label>
<div class="pnl">
  <p>Correct Answer</p>
</div>

<input id='btn2' class="acc" name='acc' type='radio' hidden>
<label for='btn2'>Show Answer</label>
<div class="pnl">
  <p>Correct Answer</p>
</div>

<input id='btn3' class="acc" name='acc' type='radio' hidden>
<label for='btn3'>Show Answer</label>
<div class="pnl">
  <p>Correct Answer</p>
</div>

uj5u.com熱心網友回復：

使用forEach.

var acc = document.getElementsByClassName("acc");
let pn1 = document.getElementsByClassName("pnl");
   for (let i = 0; i < acc.length; i  ) {
  acc[i].addEventListener("click", function() {
  this.classList.toggle("active");
  [...acc].forEach((item,index) =>{
  if(item == acc[i]){
  pn1[index].style.display = "block";
  }else{
   pn1[index].style.display = "none";
}
})
})
}

.acc {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}
.active, .acc:hover {
  background-color: #ccc; 
} 
.pnl {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

<button class="acc">Show Answer</button>
<div class="pnl">
  <p>Correct Answer</p>
</div>

<button class="acc">Show Answer</button>
<div class="pnl">
  <p>Correct Answer</p>
</div>

<button class="acc">Show Answer</button>
<div class="pnl">
  <p>Correct Answer</p>
</div>

標籤：

上一篇：使用資料重定向頁面

下一篇：JQuery用微調器裝飾按鈕（在事件之前和之后做一些事情）