使用Java脚本计算类元素以仅显示某些内容

时间:2019-07-09 11:43:18

标签: javascript html web

我已经从多个html文件创建了一个网站。

在每个这些html文件中,都有一些文本内容。

内容旨在作为2个不同利益相关者的用户指南:

  1. 经理
  2. 管理人员

我想寻求有关如何计算类元素的建议,这样我就可以遍历代码而不必声明以下语句document.getElementsByClassName("HM")[0].style.display='block';

下面是我的代码的示例

<html>
<script>
function showHM(){
document.getElementsByClassName("HM")[0].style.display='block';
document.getElementsByClassName("HM")[1].style.display='block';
document.getElementsByClassName("HM")[2].style.display='block';
document.getElementsByClassName("RM")[0].style.display='none';
document.getElementsByClassName("RM")[1].style.display='none';
document.getElementsByClassName("RM")[2].style.display='none';


var y = document.getElementsByClassName("HM");
var i
for (i=0; i<y.length; i++) {
y[i].style.backgroundColor"red";
}

function showRMO(){ 
document.getElementsByClassName("HM")[0].style.display='none';
document.getElementsByClassName("HM")[1].style.display='none';
document.getElementsByClassName("HM")[2].style.display='none';
document.getElementsByClassName("RM")[0].style.display='block';
document.getElementsByClassName("RM")[1].style.display='block';
document.getElementsByClassName("RM")[2].style.display='block';
</script>
<body>

<div class="RM">RM Step 1</div>
<div class="HM">HM Step 1</div>

<div class="RM">RM Step 2</div>

<div class="HM">HM Step 2</div>

<div class="RM">RM Step 3</div>

<div class="HM">HM Step 3</div>

 <button onclick="showHM()">show HM</button>

 <button onclick="showRMO()">show RMO</button>
  </body>
</html>

先感谢您的好心!

0 个答案:

没有答案