使用javascript按类别隐藏li的元素

Question

我在ul标签中有很多li，他们的班级称为“ 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>

并且请使用我不希望使用jqueries的javascript帮助我。

Answer 1

我认为您可以执行以下操作：

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 ? 'inline' : '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>

我希望这会有所帮助！

Answer 2

您的问题在->箭头<-之间：

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

您仅选择getElementsByClassName返回的第一个元素。要纠正此问题，您可以执行以下操作：

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

为您的显示答案按钮分配类似的代码块，但将显示设置为block或inherit或当前显示的内容。

希望这会有所帮助。