使用Javascript控制HTML块
[英]Using Javascript to control an HTML block
问题描述
我的网页上有一个HTML块。 我希望能够基于Javascript变量来打开和关闭它。
我曾尝试在Javascript代码（HTML内部）中添加HTML字符串，但这是一个足够大的块，我不禁想到有更好的方法。
我真正想做的是（用伪代码）：
if (adminLevel === 200) {
<enable a block of code that include a number of tables and forms in HTML>
}
或在代码中，例如：
<Title>Test</title>
<h2>Some Stuff here</h2>
<!-- Admin Stuff -->
<a href="Slowdown.html">Click here to slow down</a>
<a href="speed up.html">Click here to speed up</a>
<table><tr><td>Status</td></tr><tr><td>Running</td></tr></table>
<!-- End admin stuff -->
</body>
</html>
<script>
if (adminLevel === 200) { ** enable block ** }
</script>
几年前，我认为我做过类似ASP的事情，但是今天我正在使用Javascript。
有任何想法吗？
5 个解决方案
解决方案1
0 2019-04-11 16:02:22
给HTML元素一个ID例如
<div id="test" style="display:none">
<script>
if (adminLevel == 200) {
document.getElementById('test')style.display = 'block'
}
else{
document.getElementById('test')style.display = 'none'
}
</script>
解决方案2
0 2019-04-11 16:04:46
如果我正确理解了您的问题，我认为您想显示/隐藏基于js变量的html代码块。您可以对此进行jquery。 给该div一个html类，这样，每当文档准备就绪时，您都可以通过$（“。class_name”）。hide（）;将其隐藏。 并显示使用if（condition）{$（“。class_name”）。show（）;}
解决方案3
0 2019-04-11 16:06:27
var adminLevel = 200; if (adminLevel === 200) { document.getElementById("admin-block").style.display = "block"; }
#admin-block { display:none }
<!doctype html> <html> <head> <Title>Test</title> </head> <body> <h2>Some Stuff here</h2> <div id="admin-block"> <!-- Admin Stuff --> <a href="Slowdown.html">Click here to slow down</a> <a href="speed up.html">Click here to speed up</a> <table><tr><td>Status</td></tr><tr><td>Running</td></tr></table> <!-- End admin stuff --> </div> </body> </html>
如果adminLeve = 200 ，这可能会显示该块，但是您不应该在javascript中执行后端操作。 用户具有访问javascript的权限，因此每个人都可以进入您的代码块。
如果要检查用户是否为admin，请使用服务器端脚本语言（例如PHP）进行操作。 在那里，您应该检查用户的角色，如果是admin，则可以为管理员呈现内容。
解决方案4
0 已采纳 2019-04-11 16:10:53
要添加到安德鲁的评论关于添加ID到款，你也应该换你的HTML块中<div>标签，并把ID 上 ，而不是单独的章节。
HTML：
<!-- Admin Stuff -->
<div id="example-id">
<a href="Slowdown.html">Click here to slow down</a>
<a href="speed up.html">Click here to speed up</a>
<table><tr><td>Status</td></tr><tr><td>Running</td></tr></table>
</div>
<!-- End admin stuff -->
对于JavaScript：
if (adminLevel == 200) {
document.getElementById('example-id').style.display = 'block'
}
else{
document.getElementById('example-id').style.display = 'none'
}
这样，您可以用JavaScript在一行中隐藏整个块，而不必隐藏每个单独的块。
编辑：另外，正如其他人指出的那样，这不是处理管理员访问权限的非常安全的方法。 您可能应该使用所使用的任何服务器端语言（ASP / JSP / PHP / etc。）而不是JavaScript来处理此问题。
解决方案5
0 2019-04-11 16:18:10
你可以使用淘汰赛，我重写你的例子
// simulation result var adminLevel = 200 var ViewModel = function() { this.AdminLevel = ko.observable(); }; var model = new ViewModel() ko.applyBindings(model); model.AdminLevel(adminLevel)
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <h2>Some Stuff here</h2> <!-- Admin Stuff --> <!-- ko if: AdminLevel() === 200 --> <a href="Slowdown.html">Click here to slow down</a> <a href="speed up.html">Click here to speed up</a> <table><tr><td>Status</td></tr><tr><td>Running</td></tr></table> <!-- /ko --> <!-- End admin stuff -->
InsertAfter 使用 Javascript 的长 HTML 块
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.