kann keine versteckte Klasse zur Anzeige mit jquery

Question

Ich arbeite an einem Tic Tac Toe-Spiel auf Codepen und erstellte mein eigenes Modal. Das erste Modal funktioniert sehr gut und erscheint und verschwindet korrekt. Mein zweites Modal hat eine Klasse, die Deckkraft und Sichtbarkeit so einstellt, dass das Element genau wie das erste unsichtbar ist. Der Unterschied ist, dass wenn ich die Klasse entferne, die das Element verbirgt. Das Element wird nicht angezeigt.

Ich glaube, ich habe vorher gelesen, dass dies mit Jquery zu tun hat, nicht zu wissen, dass das Element versteckt ist. Ich kann mich nicht erinnern, wie ich es beheben könnte und konnte kein anderes Problem finden. Ich möchte wissen, warum das erste Element funktioniert und das zweite nicht? Ich habe einen Teil des relevanten Codes für den Kontext und einen Link zu der ganzen Sache eingefügt.

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

Ihr jquery Code ist genial und perfekt, außer es ein Problem mit html war. Sie schließen nicht die div mit class-.popup.who weshalb die div mit class-.popup.end würde Verpackung .popup.who withing am Ende - div und nach mit dem ersten modalen Finishing, wenn Sie hide.popup.who-div, den .popup.end auch tatsächlich versteckt, da die gleiche wurde innerhalb der .popup.who - div gewickelt.

fehlerhaften Code

<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> 

Corrected Code

<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