无法获得与jquery一起显示的隐藏类

Question

我正在开发一个在codepen上的tic tac脚趾游戏并创建了自己的模态。第一个模态工作得很好，出现和消失正确。我的第二个模式有一个类设置不透明度和可见性，以便元素像第一个一样不可见。不同的是，当我删除隐藏元素的类。该元素没有出现。

我相信我之前已经看过，这与jQuery的不知道有关元件隐藏的事。我不记得如何解决这个问题，也找不到像这样的问题。我想知道为什么第一个元素起作用，而第二个元素不起作用？我放置了一些相关的上下文代码和一个链接。

This is the codepen link

hasWon(){ 
 
     let scores = this.scoring(); 
 
     console.log(scores); 
 
     let win = $('.popup.end'); 
 
     for(let i = 0; i < scores.length; i++){ 
 
     let win = $('.end'); 
 
     if(scores[i] === 3 || scores[i] === -3){ 
 
      if(this.player === 1 && scores[i] === 3 
 
      || this.player === -1 && scores[i] === -3){ 
 
      win.html("<h4>Player won the Game!</h4>"); 
 
      } else { 
 
      win.html("<h4>Computer won the Game!</h4>"); 
 
      } 
 
      $('.back').removeClass('showEl'); 
 
      win.classList.remove("hideEl"); 
 
     } 
 
     } 
 
     if(this.emptyIndices().length === 0){ 
 
     win.html("<h4>It's a draw!</h4>"); 
 
     $('.back').removeClass('showEl'); 
 
     // THIS SHOULD ACTIVATE SECOND MODAL! 
 
     win.classList.remove("hideEl"); 
 
     } 
 
    }

.popup { 
 
    font-family: 'Signika', 'sans-serif'; 
 
    margin: 100px auto 0 auto; 
 
    width: 600px; 
 
    height: 270px; 
 
    background: #d0e6d0; 
 
    border: 6px solid #97b097; 
 
    box-shadow: 0px 0px 1000px 2000px rgba(228, 241, 228, 0.9); 
 
    border-radius: 60px; 
 
    position: relative; 
 
    z-index: 1; 
 
    visibility: visible; 
 
    opacity: 1; 
 
    transition: all .5s; 
 
} 
 

 
.popup h4 { 
 
    padding-top: 60px; 
 
    font-weight: bold; 
 
    font-size: 2.5em; 
 
    left: 13%; 
 
    position: absolute; 
 
} 
 

 
.hideEl { 
 
    opacity: 0; 
 
    visibility: hidden; 
 
} 
 

 
.showEl { 
 
    opacity: 1; 
 
    visibility: visible; 
 
}

<div class="popup end hideEl"> 
 
    <h4>Ending Message</h4> 
 
</div>

Answer 1

你jquery代码真棒和完善，除了有问题html。你没有关闭div与class - .popup.who这就是为什么div与class - .popup.end竟又包装withing .popup.who - div与第一模完成，当你hide.popup.who后 - div，它实际上隐藏了.popup.end也因为同样的被包裹在.popup.who-div之内。

故障代码

<div class="popup who"> 
    <h4>Do you want to play as X or O?</h4> 
    <button type="button" class="btn btn-lg btn-primary choose_x player">X</button> 
    <button type="button" class="btn btn-lg btn-primary choose_o player">O</button> 
<div> <!--This here wasn't ending the div--> 

<div class="popup end hideEl"> 
    <h4>Ending Message</h4> 
</div> 

更正代码

<div class="popup who"> 
    <h4>Do you want to play as X or O?</h4> 
    <button type="button" class="btn btn-lg btn-primary choose_x player">X</button> 
    <button type="button" class="btn btn-lg btn-primary choose_o player">O</button> 
</div> 

<div class="popup end hideEl"> 
    <h4>Ending Message</h4> 
</div> 

UPDATED CODEPEN