javascript - 如何通过显示 :none be made visible again with JavaScript? 使元素不可见

<分区>

关闭。这个问题是not reproducible or was caused by typos .它目前不接受答案。

这个问题是由于错别字或无法再重现的问题引起的。虽然类似的问题可能是on-topic在这里，这个问题的解决方式不太可能帮助 future 的读者。

关闭 6 年前。

我有这个 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”中的值: (我使用 block 因为 visible 是为了可见样式，而不是显示样式)

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/

最佳答案

您只需使用 CSS 即可完成此操作。这是一个典型的例子，说明如何使用 CSS 的力量真正减少代码库。

美化诸如特权之类的东西是你只需将 Angular 色类添加到页面顶部并使用 CSS 选择器来显示和隐藏东西。

这是一个演示的 fiddle :

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>

在下面这个更新的 fiddle 中，我有一些 JS 可以动态添加 Angular 色并仅使用 CSS 打开正确的 div。

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

关于javascript - 如何通过显示 :none be made visible again with JavaScript? 使元素不可见，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42334747/

上一篇：javascript - 为什么我的 div 没有缩小

下一篇：javascript - 在 then() block 中使用返回 promise 的函数

css - 使用 html5 的 nav 标签更改 nav>ul>li>a 元素的字体大小

delphi - 使用 Windows DOM 和 TXMLDocument 验证 XML : doesn't work on some computers

javascript - 未捕获的类型错误 : Cannot set property 'src' of undefined

javascript - 它工作不正常，输出未定义？

javascript - 简单 javascript 属性更改的一些错误

javascript - typescript (Angular2): Passing objects to functions -> possible memory leaks?

javascript - 如何在站点加载后使输入字段聚焦？

html - 如何设置 HTML 表格单元格继承其大小？

html - SelectNodes 和 GetElementsByTagName