使用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.