如何隐藏在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游戏圈之间的元素？

回答

相关问题