如果...否则，则使用Javascript更改元素ID

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

问题描述

5 个解决方案

解决方案1
2 2010-09-10 00:36:33

解决方案2
1 2010-09-10 00:38:25

解决方案3
0 2010-09-10 00:35:46

解决方案4
0 2010-09-10 00:37:24

解决方案5
0 2010-09-10 00:41:27

如果...否则，则使用Javascript更改元素ID

问题描述

5 个解决方案

解决方案1 2 2010-09-10 00:36:33

解决方案2 1 2010-09-10 00:38:25

解决方案3 0 2010-09-10 00:35:46

解决方案4 0 2010-09-10 00:37:24

解决方案5 0 2010-09-10 00:41:27

解决方案1
2 2010-09-10 00:36:33

解决方案2
1 2010-09-10 00:38:25

解决方案3
0 2010-09-10 00:35:46

解决方案4
0 2010-09-10 00:37:24

解决方案5
0 2010-09-10 00:41:27