Question

我有这个HTML设置，以便在某个函数运行之前不会显示这些元素。 HTML本身就很好......

<div id="aftlogin">
    <div id="priv1" style="display: none;">
        <p>Welcome there!</p>
    </div>
    <div id="priv2" style="display: none;">
    </div>
    <div id="priv3" style="display: none;">
    </div>
    <div id="priv4" style="display: none;">
    </div>
    <div id="priv5" style="display: none;">
    </div>
</div>

...这是JavaScript搞砸一切：这个JavaScript函数应该让这些元素再次可见。变为可见的元素取决于存储在变量“role”中的值： （我使用了块，因为可见的是可见的样式，而不是显示样式）

if (role == "priv1") {
    document.getElementById("priv1").style.display = "block";
}
if (role == "priv2") {
    document.getElementById("priv1").style.display = "block";
    document.getElementById("priv2").style.display = "block";
}
if (role == "priv3") {
    document.getElementById("priv1").style.display = "block";
    document.getElementById("priv2").style.display = "block";
    document.getElementById("priv3").style.display = "block";
}
if (role == "priv4") {
    document.getElementById("priv1").style.display = "block";
    document.getElementById("priv2").style.display = "block";
    document.getElementById("priv3").style.display = "block";
    document.getElementById("priv4").style.display = "block";
}
if (role == "priv5") {
    document.getElementById("priv1").style.display = "block";
    document.getElementById("priv2").style.display = "block";
    document.getElementById("priv3").style.display = "block";
    document.getElementById("priv4").style.display = "block";
    document.getElementById("priv5").style.display = "block";
}

这种或那种方式，代码不起作用。如果我不对它进行评论，整个功能就会停止工作，因此很难确切地指出问题所在。所有的语法都是正确的，所以我做了一些让JavaScript神更难过的东西？

这是一个jsFiddle演示：https://jsfiddle.net/9p9xx8sz/

Answer 1

你可以用CSS做到这一点。这是一个典型的例子，说明如何通过使用CSS的强大功能来真正减少代码库。

美化特权权限之类的东西就是将角色类添加到页面顶部，并使用CSS选择器来显示和隐藏内容。

这是一个小提琴演示：

https://jsfiddle.net/9p9xx8sz/3/

#priv1,#priv2,#priv3,#priv4,#priv5 {
  display:none;
}
.priv1 #priv1 {
  display:block;
}
.priv2 #priv1, .priv2 #priv2 {
  display:block;
}
.priv3 #priv1, .priv3 #priv2,.priv3 #priv3 {
  display:block;
} 
.priv4 #priv1,.priv4 #priv2,.priv4 #priv3,.priv4 #priv4 {
  display:block;
}
.priv5 #priv1,.priv5 #priv2,.priv5 #priv3,.priv5 #priv4,.priv5 #priv5 {
  display:block;
}

<div id="aftlogin" class="priv1" >
			<div id="priv1" >
				<p>Welcome there!</p>
			</div>
			<div id="priv2" >
			</div>
			<div id="priv3" >
			</div>
			<div id="priv4" >
			</div>
			<div id="priv5" >
			</div>
</div>

在下面的这个更新的小提琴中，我有一些JS动态添加角色并使用CSS打开正确的div。

https://jsfiddle.net/9p9xx8sz/5/

Answer 2

在审核完您的网页后，我发现您要在同时隐藏的div元素中显示parent元素。

移动你的元素，使它成为兄弟姐妹，它将解决问题！

如何通过显示使元素不可见：使用JavaScript再次无法显示元素？

2 个答案: