使用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，將需要他們的JS，使接口工作結束。

有沒有辦法讓JS循環通過div ID和顯示樣式與被點擊的相關聯？

Answer 1

另一種方法是重複使用表示模具邊的div，而不是爲每個（子）值集創建單獨的div。 通過使用可以包含子值的數據結構，點擊可以通用，可以使用活動集的子值。 下面添加一個示例。它不包含所有值，但數據結構應該很容易擴展。這是一個基本的例子，並不做的事情作爲改變背景顏色，但可以被耦合到cur對象（例如，「電平」以及基於所述電平一個特定的類）

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

 
const data = { 
 
\t Europe: { 
 
    \t France: ["Paris", "Lyon", "Cannes", "Saint-Tropez", "Marseille", "Avignon"], 
 
    Poland:["Warschau"], 
 
    Croatia:["Zagreb"], 
 
    \t Germany: ["Berlin","Hamburg"], 
 
    Spain:["Madrid", "Barcelona"], 
 
    Ireland: ["Dublin"] 
 
    }, 
 
    Asia: { 
 
    \t Japan: ["Tokyo"] 
 
    }, 
 
    "North and Central America":{ 
 
    \t 
 
    }, 
 
    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 
 
\t cur.obj = obj || data; //if obj is null, end of the line is reached and initial 'data' is used 
 
\t 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 
 
    \t 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) 
 
\t sides[i].onclick = function(){ 
 
    \t 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>