我需要关于多次重复使用 ID 的帮助答案

【问题标题】：I need assistance on reusing an ID more than once我需要关于多次重复使用 ID 的帮助
【发布时间】：2018-12-16 06:46:58
【问题描述】：

所以我在做一个猜词游戏，

在我的 Game.js 文件中，我有一个名为 Game 的类，它有一个名为 checkForwin() 的方法，用于检查玩家是否选择了游戏中的所有字母，它基于我看到的 console.log 消息工作

checkForWin() {
    //phraseMatch is the length of the empty boxes
const phraseMatch  = $('.letter').length;
//match is the length of the displayed boxes with the class of show
const match  = $('.letter.show').length;
//if the length of the empty boxes is equal to the length of the displayed boxes then return true
  if (phraseMatch === match) {
      console.log(phraseMatch + match + ' (the player has chosen all letters in the phrase')
    return true
  }

}

我被困在一个名为gameOver()的方法上，如果玩家输了，这个方法会显示红屏，如果玩家赢了，会显示绿屏，我可以选择 ID 为 #game-over-message 的 h1，以便在玩家输掉比赛时通过添加类（'loose a'）来更改屏幕的消息和颜色，但是当我尝试使用相同的 ID 时第二次说

else if (this.checkForWin === true || this.missed < 5)  {
        $('#game-over-message').text('You won!');
        $('#overlay').show().addClass('win a');
        $('#btn__reset').text('Try Again!');



    }

我似乎无法通过在我的 css 文件中添加类 ('win a') 来访问 id 以显示获胜颜色

gameOver() {
    //if the player misses 5 times, display the game over message from index.html
    if (this.missed === 5) {
        $('#game-over-message').text('Game Over You Lost'); 
        $('#overlay').show().addClass('lose a');
        $('#btn__reset').text('Try Again!!');






    } else if (this.checkForWin === true || this.missed < 5)  {
        $('#game-over-message').text('You won!');
        $('#overlay').show().addClass('win a');
        $('#btn__reset').text('Try Again!');



    }

}

有人可以帮忙吗？这是我的仓库供参考https://github.com/SpaceXar20/FSJS-techdegree-project-4-b

【问题讨论】：

'win a' 是两个独立的类
我有类似的东西，当我使用 $('#overlay').show().addClass('lose a') 时，它似乎工作正常，只是在我使用 $( '#overlay').show().addClass('win a');，你能详细说明你的答案吗
我不太明白你的问题，I can't seem to access the id in order to display the winning color by adding the class ('win a') - 你看起来怎么样？
啊，是的，请允许我澄清一下，在我的 html 文件中，我有这个 h1：<h1 id="game-over-message"></h1>，这是我指的 id

标签： javascript

【解决方案1】：

我检查了您的代码。您没有得到输出的原因是您只有在错过 5 次机会时才调用游戏结束功能。在 handleInteraction 上调用 gameOver() ，如下所示，您将获得输出。我还注意到，游戏结束功能没有意义，你可以简单地调用 do wins css change 在控制台日志中显示“玩家选择了短语中的所有字母”并且 removeLife 中的红色 css 更改() 你已经调用了 gameOver();

handleInteraction(letter) {

    /*if the player matched a letter, the checkforwin method will be called
    and the letter will be shown by calling showedMatchedLetter()
    */
    if (phrase.checkLetter(letter) === true) {

        phrase.showMatchedLetter(letter);
        this.checkForWin();

    } //if the player didn't match a letter, the game will remove a heart life by calling removelife method and add 1 to the missed property
      else {
          this.removeLife();

      }

      this.gameOver();

}

希望你得到你的答案:)

【讨论】：

你说得对！我花了很多时间专注于忽略了 handleInteraction() 的 if 语句，谢谢！！

【解决方案2】：

我猜你的else if 条件不匹配

而不是

this.checkForWin === true（总是错误的，因为它是一个函数）

你想检查实际的返回值所以你必须执行它

this.checkForWin() === true

您可能已经发现它没有执行，例如使用console.log("xyz") 进行调试

【讨论】：