Question

我正在尝试创建一个if ... else if ... else参数，其中唯一的变量是当前的访问级别编号。这将确定要向用户显示的内容，以便1级别的人看到一件事，0级别的人看到另一件事。

默认情况下，所有内容都是隐藏的，但是一旦有人访问网页，Javascript就会更改元素的ID以显示相应的内容。我不太确定我做错了什么，但它没有改变它应该的ID。如果我以错误的方式解决这个问题，请告诉我其他替代方案。

<html>
<body>


<style type="text/css">
#AccessLevel1Hide {display: none; }
#AccessLevel1Show {display: block; }
#AccessLevel0Hide {display: none; }
#AccessLevel0Show {display: block; }
</style>


<script type="text/javascript">
var AccessLevel = (1);

if (AccessLevel == 1){
   document.getElementById('AccessLevel1Hide').id="AccessLevel1Show";
}else if (AccessLevel == 0){
   document.getElementById('AccessLevel0Hide').id="AccessLevel0Show";
}else {document.write("ERROR");
}
</script>


<div id="AccessLevel1Hide">
Access Level 1 message.
</div>

<div id="AccessLevel0Hide">
Access Level 0 message.
</div>


</body>
</html>

Answer 1

使用类更容易，比如：

请参阅http://jsfiddle.net/hJ6gd/8/

<html>
<body>


<style type="text/css">
 .hide {display: none; }
 .show {display: block; }
</style>


<script type="text/javascript">
var AccessLevel = (1);

if (AccessLevel == 1){
   document.getElementById('AccessLevel1').setAttribute("class", "show");
}else if (AccessLevel == 0){
   document.getElementById('AccessLevel0').setAttribute("class", "show");
}else {document.write("ERROR");
}
</script>


<div id="AccessLevel1" class="hide">
Access Level 1 message.
</div>

<div id="AccessLevel0" class="hide">
Access Level 0 message.
</div>


</body>
</html>

但是，应该注意这一点并不安全 - 他们所要做的就是查看所有内容的来源。

Answer 2

我之前从未尝试过更改元素ID，我不确定它是否有意义。您应该使用类而不是ID来执行此操作，因此您的CSS为.AccessLevel1Hide等并更改类。

但真正的问题是将此信任给客户端/浏览器。我可以轻松地更改我的访问级别，或者只查看页面源并查看每个访问级别的所有内容。

这些检查应该在服务器端完成，并且只有适当的内容传递给浏览器。

Answer 3

当您将AccessLevel1Hide更改为AccessLevel0Hide时，第二个getElementById将获取第一个div（您在第一步中为其更改了ID。）

您需要做的是将AccessLevel1Hide更改为AccessLevelTempHide，将AccessLevel0Hide更改为AccessLevel1Hide，然后将AccessLevelTempHide更改为AccessLevel0Hide。

我建议您使用CSS类，而不是更改ID。

Answer 4

我认为更好的方法是让ID保持静态并添加一个更改的类。或者，您也可以只更改每个元素的.style.display，而不是ID。

Answer 5

我认为你应该使用style.display属性

if (AccessLevel == 1){
    document.getElementById('AccessLevel1Hide').style.display = "block";
    document.getElementById('AccessLevel0Hide').style.display = "none";

}else if (AccessLevel == 0){
    document.getElementById('AccessLevel1Hide').style.display = "none";
    document.getElementById('AccessLevel0Hide').style.display = "block";

}else {document.write("ERROR");
}

使用Javascript更改元素ID，如果... else if else

5 个答案: