使用 Javascript 循环遍历 div ID 并显示与单击的 ID 关联的样式

Question

我正在尝试为我 4 岁的地理专业的孩子构建一个简单的游戏辅助工具。我为此使用 Codepen：https://codepen.io/micsad/pen/PjNVpX

我们的想法是掷骰子来选择一个大陆。然后再次掷骰子从该大陆选择一个国家。然后最后一次掷骰子，从该国家/地区选择一座城市。

我希望我们有一个简单的界面，可以帮助我们在掷骰子时浏览各大洲、国家和城市。在我链接的笔中尝试使用欧洲和法国。

我使用绑定到 div ID 的叠加层来启用这种导航。这是激活“欧洲覆盖”样式的 JS：

function europeon() {
document.getElementById("overlay-europe").style.display = "block";
}

function europeoff() {
document.getElementById("overlay-europe").style.display = "none";
}

如果每个大陆和国家都以同样的方式行事，我最终会得到大量 div ID，这些 div ID 需要它们的 JS 才能使界面正常工作。

有没有办法让 JS 循环遍历 div ID 并显示与被点击的相关联的样式？

Answer 1

另一种方法是重用代表芯片面的 div，而不是为每个（子）值集创建单独的 div。 通过使用可以包含子值的数据结构，单击可以以可以使用活动集的子值的方式进行通用。 下面添加一个示例。它不包含所有值，但数据结构应该易于扩展。这是一个基本示例，不会更改背景颜色，但可以与 cur 对象耦合（例如，“级别”并根据级别设置特定类）

//note: the example makes use of ES6 methods and syntax

const data = {
	Europe: {
  	France: ["Paris", "Lyon", "Cannes", "Saint-Tropez", "Marseille", "Avignon"],
    Poland:["Warschau"],
    Croatia:["Zagreb"],
  	Germany: ["Berlin","Hamburg"],
    Spain:["Madrid", "Barcelona"],
    Ireland: ["Dublin"]
  },
  Asia: {
  	Japan: ["Tokyo"]
  },
  "North and Central America":{
  	
  },
  Africa:{
  
  },
  "South America":{
  
  },
  "Australia and Oceani":{
  
  }
};

const sides = [...document.querySelectorAll('div.side')]; //get a reference to all side divs (another option would be to generate the html dynamically)

let cur = {props : [], obj:data}; //active object

function set(obj){ //sets 'curprops' and fills the sides with the appropiate text
	cur.obj = obj || data; //if obj is null, end of the line is reached and initial 'data' is used
	cur.props = Array.isArray(cur.obj) ? cur.obj : Object.getOwnPropertyNames(cur.obj); 
  for(let i=0; i < sides.length; i++){ //set the text of each side
  	sides[i].querySelector('.table-cell').textContent = i < cur.props.length ? cur.props[i] : ''; //the check if i < the number of props might be redundant if all values are guaranteed to have (at least) 6 values, but otherwise empties all other sides
  }  
}

set(); //first call to set the initial values

for(let i=0;i<6;i++) //bind each side to its own click event (note 'let' instead of 'var' is important here)
	sides[i].onclick = function(){
  	set(cur.obj[cur.props[i]]);
  }

body {
  background-color: darkkhaki;
}
.side {
  float:left;
  position: relative;
  width: calc(100%/ 7);
  margin: 1%;
  padding-bottom: calc(100% / 7);
  background-color: none;
  overflow:hidden;
  border: 2px solid gray;
}

.content {
  position: absolute;
  height: 90%;
  width: 90%;
  padding: 5%;
}

.table {
  display: table;
  width: 100%;
  height: 100%;
}

.table-cell {
  display:  table-cell;
  vertical-align: middle;
  text-align: center;
  color: white;
  font-family: Verdana;
  font-size: 2em;
  font-weight: bold;  
}



.one {
  position: absolute;
  top: 0%;
  right: 0%;
  width: 20%;
  height: 20%;
  background-color: gray;
  overflow: hidden;
  display: table;
}

.dice {
  display: table-cell;
  color: white;
  font-family: Verdana;
  font-size: 250%;
  vertical-align: middle;
  text-align: center;
  font-weight: bold;  
}

<div id= "overlay">

<div class="side"> 
  <div class="content">
    <div class="table">
      <div class="table-cell"></div>
      <div class="one"><div class="dice">1</div></div>     
    </div>  
  </div>  
</div>  

<div class="side">
  <div class="content">
    <div class="table">
      <div class="table-cell"></div>
      <div class="one"><div class="dice">2</div></div>
    </div>  
  </div>  
</div>

<div class="side">
  <div class="content">
    <div class="table">
      <div class="table-cell"></div>
      <div class="one"><div class="dice">3</div></div>
    </div>  
  </div>  
</div> 
<div class="side">
  <div class="content">
    <div class="table">
      <div class="table-cell"></div>
      <div class="one"><div class="dice">4</div></div>
    </div>  
  </div>  
</div> 
<div class="side">
  <div class="content">
    <div class="table">
      <div class="table-cell"></div>
      <div class="one"><div class="dice">5</div></div>
    </div>  
  </div>  
</div> 

<div class="side">
  <div class="content">
    <div class="table">
      <div class="table-cell"></div>
      <div class="one"><div class="dice">6</div></div>
    </div>  
  </div>  
</div> 

</div>