使用Javascript控制HTML块
[英]Using Javascript to control an HTML block
问题描述
I have an HTML block on my web page. 
我的网页上有一个HTML块。 I want to be able to toggle it on and off based on a Javascript variable. 我希望能够基于Javascript变量来打开和关闭它。
I've tried adding the string of HTML in the Javascript code (HTML inner), but it's a large enough block that I can't help but think there is a better way. 我曾尝试在Javascript代码（HTML内部）中添加HTML字符串，但这是一个足够大的块，我不禁想到有更好的方法。
What I would really like to do is (in pseudo code): 我真正想做的是（用伪代码）：
if (adminLevel === 200) {
<enable a block of code that include a number of tables and forms in HTML>
}
or in code, something like: 或在代码中，例如：
<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>
Years ago I think I did something like this is ASP, but today I am working with Javascript. 几年前，我认为我做过类似ASP的事情，但是今天我正在使用Javascript。
Any ideas? 有任何想法吗？
5 个解决方案
解决方案1
0 2019-04-11 16:02:22
Give the HTML element an ID for example 给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
If i understood your question right, i think you want to show/hide a block of html code based on js variable You could you jquery for that. 如果我正确理解了您的问题，我认为您想显示/隐藏基于js变量的html代码块。您可以对此进行jquery。 Give that div a class in html So whenever document is ready you could hide it by $(".class_name").hide(); 给该div一个html类，这样，每当文档准备就绪时，您都可以通过$（“。class_name”）。hide（）;将其隐藏。 and to display use if(condition){$(".class_name").show();} 并显示使用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>
This could show the block if adminLeve = 200 , but you shouldn't do backend things in javascript. 如果adminLeve = 200 ，这可能会显示该块，但是您不应该在javascript中执行后端操作。 User has acces to javascript, so in this everyone cat get to your block of code. 用户具有访问javascript的权限，因此每个人都可以进入您的代码块。
If you want to check if the user is admin, do it using a server side scripting language (for example PHP). 如果要检查用户是否为admin，请使用服务器端脚本语言（例如PHP）进行操作。 There you should check the role of user and if is admin, then you can render the content for admins. 在那里，您应该检查用户的角色，如果是admin，则可以为管理员呈现内容。
解决方案4
0 已采纳 2019-04-11 16:10:53
To add to Andrew's comment about adding an ID to the section, you should also wrap your block of HTML in a <div> tag and put the ID on that , not the sections alone. 要添加到安德鲁的评论关于添加ID到款，你也应该换你的HTML块中<div>标签，并把ID 上 ，而不是单独的章节。
HTML: 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 -->
and for the JavaScript: 对于JavaScript：
if (adminLevel == 200) {
document.getElementById('example-id').style.display = 'block'
}
else{
document.getElementById('example-id').style.display = 'none'
}
This way you hide the whole block with one line in JavaScript, rather than having to hide each individual piece. 这样，您可以用JavaScript在一行中隐藏整个块，而不必隐藏每个单独的块。
Edit: Also as someone else has noted, this is not a very secure method of handling admin access. 编辑：另外，正如其他人指出的那样，这不是处理管理员访问权限的非常安全的方法。 You should probably be handling this in whatever server-side language you're using (ASP/JSP/PHP/etc.) rather than JavaScript. 您可能应该使用所使用的任何服务器端语言（ASP / JSP / PHP / etc。）而不是JavaScript来处理此问题。
解决方案5
0 2019-04-11 16:18:10
you can use knockout I rewrite your example 你可以使用淘汰赛，我重写你的例子
// 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 -->
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.