Question

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

这是我的清单：

＆＃13;

<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>

＆＃13;

到目前为止我尝试了什么并且没有工作：

＆＃13;

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

＆＃13;

提前致谢！

Answer 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();
    }

Answer 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运行时显示它们。

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

2 个答案: