无法使用 jquery 显示隐藏类

Question

我正在使用 codepen 开发井字游戏，并创建了自己的模式。第一个模态效果很好，可以正确出现和消失。我的第二个模态有一个设置不透明度和可见性的类，以便元素像第一个一样不可见。不同之处在于，当我删除隐藏元素的类时。该元素未出现。

我相信我之前读过这与 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 最终会包裹 .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