javascript - 包含点击时不触发的方法

Question

我正在制作一个简单的危险游戏，但我的 on.click 根本没有触发。我试图仅当 div 包含变量答案中包含的特定文本时才触发单击。

    <h1 id="question">

</h1>
<div id="answer0">.</div>
<div id="answer1">.</div>
<div id="answer2">.</div>
<div id="answer3">.</div>



 var game = {
  correct: 0,

  questions: [
    "Where was bread invented?",
    "What color is the Whitehouse?",
    "Where is the Eiffel Tower?",
    "What is the capital of Texas?"
  ],
  answers: [
    ["Italy", "Japan", "Egypt", "Canada"],
    ["White", "Black", "Green", "Purple"],
    ["England", "France", "Germany", "Bulgaria"],
    ["Dallas", "Austin", "Houston", "Atlanta"]
  ],
  answer: ["Egypt", "White", "France", "Dallas"]
};
console.log(game.answer[0])


$('#question').text(game.questions[0]);
$('#answer0').text(game.answers[0][0]);
$('#answer1').text(game.answers[0][1]);
$('#answer2').text(game.answers[0][2]);
$('#answer3').text(game.answers[0][3]);

$( "#answer0" ).on( "click", function() {
  if ($('#answer0:contains(game.answer[0])').length) {
      alert("Correct!");
      game.correct++;
  }
});
$( "#answer1" ).on( "click", function() {
  if ($('#answer1:contains(game.answer[0])').length) {
      alert("Correct!");
      game.correct++;
  }
});
$( "#answer2" ).on( "click", function() {
  if ($('#answer2:contains(game.answer[0])').length) {
      alert("Correct!");
      game.correct++;
  }
});
$( "#answer3" ).on( "click", function() {
  if ($('#answer3:contains(game.answer[0])').length) {
      alert("Correct!");
      game.correct++;
  }
});

在这种情况下，当我点击埃及时应该会触发它，但事实并非如此。

Answer 1

看来您有两个迫在眉睫的问题:

if ($('#answer0:contains(game.answer[0])').length) {

在这里，您正在寻找一个字面上包含文本 game.answer[0] 的元素。您可能想使用该变量的实际值，因此您可以执行以下操作:

if ($(`#answer0:contains('${game.answer[0]}')`).length) {

这会用反引号(而不是单引号)包围字符串，以便您可以使用 ${variable} 在字符串内插入变量。

其次，您总是在每个 if 语句中查找 answer[0]，例如，您可能希望使用正确的索引

if ($(`#answer1:contains('${game.answer[1]}')`).length) {

您还错误地认为您的点击“未触发”。它们正在触发，但您的 if 语句条件未得到满足。使用 console.log() 添加一些日志记录可以帮助您了解将来会发生什么。