使用 JS 将 list-group-item 从隐藏更改为可见答案

【问题标题】：Change list-group-item from hidden to visible with JS使用 JS 将 list-group-item 从隐藏更改为可见
【发布时间】：2015-07-17 03:38:33
【问题描述】：

我有一个列表，其中包含几个隐藏的项目。在我的 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";
    }

提前致谢！

【问题讨论】：

标签： javascript html

【解决方案1】：

您是否尝试过使用 Toggle？我会推荐它，但您可能需要从元素中删除“隐藏”类并为每个元素添加 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();
    }

【讨论】：

【解决方案2】：

首先，您使用的是getElementbyId——它应该是getElementById（缺少大写“B”）。

其次，您已经创建了#shake 链接visibility:hidden，但是当您运行您的js 时，您的目标是包装div。

var shakeCount = 6;

if (shakeCount>5)
            document.getElementById("s1").style.visibility ="visible";

.hidden {visibility: hidden;}

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

上面的代码隐藏了包装div元素而不是链接，以便在js运行时显示它们。

【讨论】：