無法獲得與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