javascript - 使用 JS 将列表组项目从隐藏更改为可见

Question

我有一个列表，其中包含几个隐藏的项目。在我的 JS 中，我想要一个函数来更改此列表的项目，使其变得可见。我希望在发生特定事件时每个项目都变得可见。该事件工作正常，可以认为是 shakeCount= 6，以正确测试它。

这是我的列表:

<div class="container">
  <div class="list-group">
    <div id="s1"><a href="#shake1" class="list-group-item hidden">Shake1</a></div>
    <div id="s2"><a href="#shake2" class="list-group-item hidden">Shake2</a></div>
    <div id="s3"><a href="#shake3" class="list-group-item hidden">Shake3</a></div>
  </div>
</div>

到目前为止我尝试过但没有成功:

function nR(){
        if (shakeCount>5)
            document.getElementbyId("s1").style.visibility ="visible";
    }

提前致谢!

Answer 1

您尝试过使用切换吗？我会推荐它，但您可能需要从元素中删除“隐藏”类，并向每个元素添加 style="display: none;" 属性，以便将它们默认为隐藏。

<div class="container">
  <div class="list-group">
    <div id="s1"><a href="#shake1" class="list-group-item" style="display: none;">Shake1</a></div>
    <div id="s2"><a href="#shake2" class="list-group-item" style="display: none;">Shake2</a></div>
    <div id="s3"><a href="#shake3" class="list-group-item" style="display: none;">Shake3</a></div>
  </div>
</div>

function nR(){
        if (shakeCount>5)
            document.getElementbyId("s1").toggle();
    }