javascript - 使用 JavaScript 按类隐藏 li 的元素

Question

我有许多 li ，它们的类在 ul 标记中为 ans 。当单击隐藏按钮时，我想消失那些具有 ans 作为类的 li ，当单击显示按钮时，我希望所有它们重新出现，如果可能的话，几乎没有过渡。

我做了很少的 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 对于这个小代码解决方案来说完全是多余的。

希望这会有所帮助!