测验游戏：如何在DOM上定位正确答案并隐藏它

Question

我正在通过模仿家庭仇恨的问答游戏来工作。我输入了一个用户输入的内容，如果页面上显示的三个答案之一与该用户的输入内容相匹配，则玩家会得到分数，答案将从数组中删除，并且相同的答案应消失。

虽然它可以在javascript中正常工作，但我需要添加样式以删除任何被猜到的正确答案。

简而言之，我目前能够根据用户输入的内容来匹配页面上的正确答案对象。现在如何在DOM上访问同一对象并隐藏其内容？

谢谢！

• 无后端
• 答案存储在js文件中的对象数组中
• 使用JQuery

编辑：由于我被钉在十字架上，询问如何通过jquery实现此目的，所以我决定改用一个函数。

correctAnswer是一个传入的对象。

  revealCorrectAnswer(correctAnswer) {
    $(".answer").each(function() {
      if ($(this).text() === correctAnswer.answer) {
        $(this).addClass("hidden");
        $(this)
          .parent()
          .next()
          .children()
          .addClass("hidden");
      }
    });
  }

<section class="question-section">
        <h2 id="current-question">Question Goes Here</h2>
</section>
<section class="answers-section">
    <article class="answer-section" id="section-1">
        <div>
            <h1 class="answer answer-1">answer1</h1>
        </div>
        <div class="pts-section">
            <p class="answer-1-pts">50</p>
        </div>
    </article>
    <article class="answer answer-section" id="section-2">
        <div>
            <h1 class="answer-2">answer2</h1>
        </div>
        <div class="pts-section">
            <p class="answer-2-pts">75</p>
        </div>
    </article>
    <article class="answer answer-section" id="section-3">
        <div>
            <h1 class="answer-3">answer3</h1>
        </div>
        <div class="pts-section">
            <p class="answer answer-3-pts">100</p>
        </div>
    </article>
</section>

<section class="whose-turn">
    <form class="whose-turn-form">
        <p class="current-turn"></p>
        <label for="player-guess">
            <input type="input" class="player-guess" id="player-guess" name="player-guess" placeholder="Make a guess!">
        </label>
        <button type="submit" class="btn submit-answer" id="submit-guess" name="submit-guess">Guess</button>
    </form>
</section>

$("#submit-guess").on("click", event => {
  event.preventDefault();

  if (game.currentRound < 3) {
    game.whoseTurn();

    //let player 1 guess first
    if (game.currentPlayerTurn === "player1") {
      rotatePlayer(player2);
      checkInputOf(player1);
      updateTheScoreOf(player1, 1);
    } else if (game.currentPlayerTurn === "player2") {
      rotatePlayer(player1);
      checkInputOf(player2);
      updateTheScoreOf(player2, 2);
    }
  } else if (game.currentRound < 5) {
    if (game.currentPlayerTurn === "player2") {
      checkInputOf(player1);
      updateTheScoreOf(player1, 1);
    } else if (game.currentPlayerTurn === "player1") {
      checkInputOf(player2);
      updateTheScoreOf(player2, 2);
    }
  } else {
    console.log("|| Exceeds Rounds ||");
  }

  function rotatePlayer(player) {
    $(".current-turn").html(`${player.name}'s turn!`);
  }

  function checkInputOf(player) {
    let userInput = $("#player-guess").val();
    player.score += game.checkUserGuess(userInput, game.currentAnswers);
  }

  function updateTheScoreOf(player, domElementId) {
    $(`.player-${domElementId}-score`).html(`Score: ${player.score}`);
  }
});