jqueryで表示する非表示クラスを取得できません

Question

私はcodepenでtic tac toeのゲームに取り組んでいて、自分のモーダルを作成しました。最初のモーダルはうまく動作し、正しく表示され消えます。私の2番目のモーダルには、不透明度と可視性を設定するクラスがあり、要素は最初のように見えません。違いは、要素を隠すクラスを削除するときです。要素が表示されません。

これは、これがjqueryとは要素が隠れていることを知らないことと関係があります。私はそれを修正する方法を覚えていないし、それのような別の問題を見つけることができませんでした。なぜ最初の要素が機能し、2番目の要素が機能しないのかを知りたいですか？コンテキストに関連するコードの一部と、すべてのものへのリンクを配置しました。

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に問題があった以外、素晴らしいと完璧です。あなたは閉じなかったdivclassと - .popup.end.popup.who withingラッピングを終わるだろう - - divを、あなたがhide.popup.whoときに最初モーダルで終えた後 - div、それは実際にあまりにも.popup.endを隠して同じことから、classとdivが理由である.popup.who.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