无法使用jquery显示隐藏的类

Question

我正在使用codepen上的tic tac toe游戏，并创建了我自己的模态。第一个模态非常有效，并且正确显示和消失。我的第二个模态有一个设置不透明度和可见性的类，这样元素就像第一个一样不可见。不同之处在于当我删除隐藏元素的类时。该元素不会出现。

我相信我之前已经读过，这与jquery有关，不知道隐藏的元素。我不记得如何解决它，也无法找到类似的另一个问题。我想知道为什么第一个元素起作用而第二个元素不起作用？我为上下文放置了一些相关的代码，并为整个事情提供了链接。

This is the codepen link

＆＃13;

＆＃13;

    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");
      }
    }

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您的jquery代码非常棒且非常完美，除了html存在问题。您没有使用div - class关闭.popup.who，这就是带有div - class的{​​{1}}最终将包含.popup.end的原因.popup.who 1}} - 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