使用 JavaScript 通过其 class 隐藏 li 的元素

Question

我有很多 li，他们的 class 作为 ul 标签中的 ans。当单击隐藏按钮时，我希望将 li 的 ans 设为 class，当单击显示按钮时，我希望它们全部重新出现，并且尽可能少地过渡。

我做的很少 JavaScript 但它只隐藏了第一个位置 li 并且它不影响其他 li。我不知道如何重现这些。

我的HTML:

<ul>
    <li class="one">Lorem ipsum dolor sit amet.</li>
    <li class="ans">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum?</li>
    <hr>
    <li class="two">Lorem, ipsum.</li>
    <li class="ans">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
    <hr>
    <li class="three">Lorem ipsum dolor sit.</li>
    <li class="ans">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
</ul>

<div class="btn" style="text-align: center;">
                <button class="green" type="button">Show Answer</button>
                <button class="red" type="button">Hide Answer</button>
              </div>

一些 JavaScript 我做到了：

<script>
        document.getElementsByClassName("red")[0].addEventListener("click", closeBox);
function closeBox(){
  document.getElementsByClassName("ans")[0].style.display = "none";
}
        </script>

我更愿意使用 JavaScript，我不想使用 jQuery。

Answer 1

所以从技术上讲，第一个问题是您试图只访问 getElementsByClassName 为您找到的第一个元素。您需要使用 Array.prototype.forEach.call 遍历所有元素，这将帮助您切换 li 项的可见性。

基于此，我认为您可以这样做：

document.getElementsByClassName("red")[0].addEventListener("click", () => setVisiblity(false));
document.getElementsByClassName("green")[0].addEventListener("click", () => setVisiblity(true));

const setVisiblity = (visible) => {
  const ansElements = document.getElementsByClassName('ans');
  const style = visible ? 'list-item' : 'none';

  Array.prototype.forEach.call(ansElements, e => {
    e.style.display = style;
  });
}

<ul>
  <li class="one">Lorem ipsum dolor sit amet.</li>
  <li class="ans">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum?</li>
  <hr>
    <li class="two">Lorem, ipsum.</li>
    <li class="ans">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
  <hr>
  <li class="three">Lorem ipsum dolor sit.</li>
  <li class="ans">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
</ul>

<div class="btn" style="text-align: center;">
  <button class="green" type="button">Show Answer</button>
  <button class="red" type="button">Hide Answer</button>
</div>

此外，我同意，jQuery 对于这个小代码解决方案来说完全是矫枉过正。

希望对您有所帮助！

Answer 2

您的问题存在于 -> 箭头之间 <-:

document.getElementsByClassName("ans") ->[0]<- .style.display = "none";

您只选择了 getElementsByClassName 返回的第一个元素。要更正此问题，您可以这样做：

var a = document.getElementsByClassName("ans");
var i;
for(i = 0; i < a.Length; i++) {
  a[i].style.display = "none";
}

将类似的代码块分配给您的 Show Answer 按钮，但将显示设置为 block 或 inherit 或任何当前显示。

希望这对您有所帮助。

Answer 3

通过访问节点列表（数组）的 [0] 元素 document.getElementsByClassName("ans")[0] 您只能获得第一个元素。

您需要遍历 NodeList 的所有元素，而不仅仅是第一个元素。

我将附加一个快速示例解决方案。

let showButton = document.querySelector('.green');
let hideButton = document.querySelector('.red');

hideButton.addEventListener("click", () => toggleAns(true));
showButton.addEventListener("click", () => toggleAns(false));

function toggleAns(hide) {
  let ansElements = document.querySelectorAll('.ans');
  for (let element of ansElements) {
    element.style.display = hide ? 'none' : 'list-item';
  }
}

<ul>
  <li class="one">Lorem ipsum dolor sit amet.</li>
  <li class="ans">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum?</li>
  <hr>
  <li class="two">Lorem, ipsum.</li>
  <li class="ans">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
  <hr>
  <li class="three">Lorem ipsum dolor sit.</li>
  <li class="ans">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
</ul>

<div class="btn" style="text-align: center;">
  <button class="green" type="button">Show Answer</button>
  <button class="red" type="button">Hide Answer</button>
</div>

使用 JavaScript 通过其 class 隐藏 li 的元素

Hiding elements of li by its class using JavaScript

html

javascript

hide