Question

我正在做一个匹配的游戏项目，当所有纸牌都匹配游戏时，就会弹出祝贺。但这在我的代码中不起作用。您能否解决一下并纠正我的错误。这样就可以正常工作。

这是我的index.html代码[模式部分]的代码段

<div class="modal" id="myModal">
<div class="modal-dialog">
    <div class="modal-content">

        <div class="modal-header">
            <h4 class="modal-title" id="myModal-label">Congratulations!!!</h4>
        </div>

        <div class="modal-body">
            <p id="myText"></p>
        </div>

        <div class="modal-footer">
            <button type="button" data-dismiss="modal" class="btn btn-success btn-default" onclick="gameStart(), $rating.removeClass('fa-star-o').addClass('fa-star');">Play Again!</button>
        </div>
      </div>
</div>
</div>

与此相关的javascript部分是

function gameOver(moves, score) {
    $('#myText').text(`Time: ${second} Seconds, Your Move: ${moves} Moves, Total Score: ${score}, Well done!!!`);
    $('#myModal').modal('toggle');
}


// Game Over after all cards have been matched, with a short delay
if (cardList === match) {
    rating(moves);
    let score = rating(moves).score;
    setTimeout(function () {
        gameOver(moves, score);
    },800);
}

Answer 1

您正在看

$('#myModal').toggle();

请参阅文档：http://api.jquery.com/toggle/

Answer 2

如上一个答案所指出的，$('#myModal').toggle();将显示模式。

您没有看到模态，因为触发gameOver函数的最终检查与始终为16的cardList匹配。

if (cardList === match) {
            rating(moves);
            let score = rating(moves).score;
            setTimeout(function () {
                gameOver(moves, score);
            },800);
        }

支票应与totalCard相对，即8，并且在匹配所有卡之后，match的值也等于8。

if (totalCard === match) {
  rating(moves);
  let score = rating(moves).score;
  setTimeout(function () {
    gameOver(moves, score);
  },800);
}

此外，由于您正在使用引导程序模态，因此也可以使用modal('toggle')来显示/隐藏模态。为此，您必须按照以下顺序添加popper.js CDN。但是，jQuery只能正常工作。只是为您的知识提供了一条额外的注释。

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

https://getbootstrap.com/docs/4.1/getting-started/introduction/#js

恭喜Modal没有弹出

2 个答案: