如何隱藏在JavaScript遊戲圈之間的元素？

我有一個基本的JavaScript/HTML棋盤遊戲由兩個玩家在一個屏幕上播放。當PLAYER1完成輪到他們，我想他們的董事會被隱藏，警報彈出詢問player2如果他們準備採取輪到他們。然後player2的棋盤變得可見。我已經嘗試了一堆東西，無法讓它工作。如何隱藏在JavaScript遊戲圈之間的元素？

var hide = false; 
displayBoard(player1); 

function displayBoard(player){ 

for (i = 0; i < boardSize + 1; i++) { 
    for (j = 0; j < boardSize + 1; j++) { 

     var gameSquare = document.createElement("div"); 
     var squareText = document.createElement("span"); 
     squareText.textContent = boardArray[j][i]; 


     if(hide){ 
      gameSquare.style.visibility = 'hidden'; 
      squareText.style.visibility = 'hidden'; 
     } 

     gameSquare.appendChild(squareText) 
     boardContainer.appendChild(gameSquare); 

     var topPosition = j * squareSize; 
     var leftPosition = i * squareSize;   

     gameSquare.style.top = topPosition + 'px'; 
     gameSquare.style.left = leftPosition + 'px'; 
    } 
} 
function fire(){ //This happens when a player clicks on the board 

    event = event || window.event; 
    var source = event.target || event.srcElement; 
    //a bunch of game logic, changing up arrays 

    //end of player's turn 
    hide = true; //I want to hide the board until the next player starts 
    displayBoard(thisPlayer); //To update the board being hidden 
    window.alert("press okay to begin " + nextPlayer + "'s turn"); 
    hide = false; 
    displayBoard(nextPlayer); 
}

當我這樣做時，html DOM中的可見性不會改變。

我自己也嘗試能見度設置爲隱藏在火（）函數，它沒有工作。我試過將boardContainer的所有孩子都設置爲隱藏。我已經嘗試在displayBoard函數的大部分之前，之中和之後執行所有這些操作。我試過禁用緩存。我試過將顯示設置爲none。我試過在displayBoard（）之後添加等待時間。

這樣做的正確方法是什麼？

我也不允許在此供參考中使用JQuery。

編輯：而不是通過元件迭代我將此添加到displayBoard（）的開始：

if (hide){ 
    boardContainer.style.visibility = "hidden"; 
    opposingBoardContainer.style.visibility = "hidden"; 
} else{ 
    boardContainer.style.visibility = "visible"; 
    opposingBoardContainer.style.visibility = "visible"; 
}

這樣做的結果是，如果我消除else塊，板的端部後消失第一回合。如果我離開else塊，似乎不會發生變化。所以我懷疑它正在消失，並且爲了我告訴它回來太快，而不是像我想要的那樣消失並等待警報窗口。有什麼想法嗎？

來源

2017-09-27 3802400

如果父元素設置爲display：none或visible hidden，那麼不應該遍歷所有子元素並更改每個元素上的顯示，否則所有子元素都不會顯示。你確定你沒有重寫某處的樣式/你是否嘗試過檢查這些元素，看看它們是否明確地繼承了正確的樣式。 – Koborl

@Koborl我按照您的建議更改了父級的可見性，但仍未按預期工作。請看看我的編輯。 – 3802400

開始我會建議添加一個隱藏的類，您可以使用boardContainer.classList.toggle（「隱藏」）的方式，並刪除需要檢查是否「隱藏」的所有時間。你也不應該使用警報來阻止執行，只需使用一個按鈕來結束回合？ – Koborl

這樣做的結果是，如果我消除了else塊，在第一回合結束後該板消失。如果我離開else塊，似乎不會發生變化。所以我懷疑它正在消失，並且爲了我告訴它回來太快，而不是像我想要的那樣消失並等待警報窗口。有什麼想法嗎？

hide = true; //I want to hide the board until the next player starts 
displayBoard(thisPlayer); //To update the board being hidden 
window.alert("press okay to begin " + nextPlayer + "'s turn"); 
hide = false; 
displayBoard(nextPlayer);

所以基本上是怎麼回事是，當你打電話提醒DOM還沒有再次呈現，所以你的主板仍然存在，當警報火災和阻止代碼的執行該休息。

所以當你點擊確定兩件事情可能會發生。

它使得董事會無形，然後執行displayBoard這使其再次可見立即。
它在渲染之前再次執行displayBoard，然後當它下一次渲染時它將可見，所以什麼都不會發生。

無論採用哪種方式，您都需要改變處理方式，以便它不依賴警報來阻止執行。

來源

2017-09-27 03:13:50 Koborl

如果我將一個eventListener添加到電路板父對象並給它一個開關轉換的函數，是否允許DOM在兩個回合之間進行渲染？這似乎沒有簡單的方法 – 3802400

如何隱藏在JavaScript遊戲圈之間的元素？

回答

相關問題