Question

在.body单击处理程序函数中，我试图输入clicked元素的值，并与问题的correctAnswer进行比较。

我认为问题是我没有正确获得clicked元素的值。

我尝试使用以下行来完成此操作：var playerGUess = $(this).val()，但我认为我在.val()中缺少某些内容。

// Create global variables for correct answers,  incorrect guesses
var correctGuesses = 0;
var incorrectGuesses = 0;
var timeLeft = 30;
var questionCounter = 0;
var gameWin = false;


// Create an object containing: All questions, correct answers and 3 incorrect answers for every question. Add an interesting fact about the answer
// (3 false and 1 true) 

// questions, answers,  wrong guesses, true or false
var quizItems = [{
    question: "What swimming stroke is named after an insect?",
    correctAnswer: "Butterfly",
    incorrect1: "Bee",
    incorrect2: "Cricket",
    incorrect3: "Wasp"
  },

  {
    question: "The largest member of the salmon family lives in the Pacific Ocean, weighs up to 120 pounds, and is known as what?",
    correctAnswer: "White Sturgeon",
    answers: ["Tuna", "Cod", "Bass", "White Sturgeon"],
  },

  {
    question: "According to the San Francisco Department of Animal Care and Control, what is the most commonly reported wild animal sighted by people in the streets of San Francisco?",
    correctAnswer: "Raccoon",
    incorrect1: "Rat",
    incorrect2: "Possum",
    incorrect3: "Fox"
  },

  {
    question: "What substance can you drop onto a scorpions head to make it sting itself to death?",
    correctAnswer: "Alcohol",
    incorrect1: "Cider",
    incorrect2: "Vinegar",
    incorrect3: "Bleach"
  },

  {
    question: "Cows have sweat glands in what part of their bodies? ",
    correctAnswer: "Nose",
    incorrect1: "Tongue",
    incorrect2: "Ears",
    incorrect3: "Feet"
  }
];

console.log("Question: " + quizItems[questionCounter].question);
console.log("Answer: " + quizItems[questionCounter].correctAnswer);


$("#start-button").on("click", function() {

  // Timer
  setInterval(countdown, 1000);
  $("#timer").text(timeLeft);

  // Display Questions
  $("#question-area").text(quizItems[questionCounter].question);
  $("#answer1").text(quizItems[questionCounter].incorrect1);
  $("#answer2").text(quizItems[questionCounter].incorrect2);
  $("#answer3").text(quizItems[questionCounter].incorrect3);
  $("#answer4").text(quizItems[questionCounter].correctAnswer);



  // add event listener to all of the answers
  // Whenever any answer is clicked, do questionCounter++ so the next answers can be displayed
  // Same for timer
});


//Click events for all the guesses
$('body').on('click', '.answer', function() {

  var playerGUess = $(this).val();

  //Check the value of the button pressed to see if its right or wrong
  if (playerGUess === quizItems[questionCounter].correctAnswer) {
    console.log("Correct");
  } else {
    console.log("incorrect");
  }

});



// Countdown Timer Function
function countdown() {
  if (timeLeft === 0) {

  } else {
    timeLeft--;
    $("#timer").text(timeLeft);
    console.log(timeLeft);
  }
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="jumbotron" id="gameContainer">
  <a class="btn btn-primary btn-lg" href="#" role="button" id="start-button">Start Game</a>
  <div id="mainGame">
    <div id="timer"></div>
    <div id="question-area"></div>
    <div id="answers-area">
      <div id="answer1" class="answer"></div>
      <div id="answer2" class="answer"></div>
      <div id="answer3" class="answer"></div>
      <div id="answer4" class="answer"></div>
    </div>
  </div>
</div>

Answer 1

看看this question来讨论.text()和.val()之间的区别

val()

获取第一个匹配元素的value属性的内容

text()

获取匹配元素集合中每个元素的组合文本内容，包括它们的后代

您单击的div没有值属性，因此我们必须使用.text()。

以下是您与correctAnswer正确匹配的示例

// Create global variables for correct answers,  incorrect guesses
var correctGuesses = 0;
var incorrectGuesses = 0;
var timeLeft = 30;
var questionCounter = 0;
var gameWin = false;


// Create an object containing: All questions, correct answers and 3 incorrect answers for every question. Add an interesting fact about the answer
// (3 false and 1 true) 

// questions, answers,  wrong guesses, true or false
var quizItems = [{
    question: "What swimming stroke is named after an insect?",
    correctAnswer: "Butterfly",
    incorrect1: "Bee",
    incorrect2: "Cricket",
    incorrect3: "Wasp"
  },

  {
    question: "The largest member of the salmon family lives in the Pacific Ocean, weighs up to 120 pounds, and is known as what?",
    correctAnswer: "White Sturgeon",
    answers: ["Tuna", "Cod", "Bass", "White Sturgeon"],
  },

  {
    question: "According to the San Francisco Department of Animal Care and Control, what is the most commonly reported wild animal sighted by people in the streets of San Francisco?",
    correctAnswer: "Raccoon",
    incorrect1: "Rat",
    incorrect2: "Possum",
    incorrect3: "Fox"
  },

  {
    question: "What substance can you drop onto a scorpions head to make it sting itself to death?",
    correctAnswer: "Alcohol",
    incorrect1: "Cider",
    incorrect2: "Vinegar",
    incorrect3: "Bleach"
  },

  {
    question: "Cows have sweat glands in what part of their bodies? ",
    correctAnswer: "Nose",
    incorrect1: "Tongue",
    incorrect2: "Ears",
    incorrect3: "Feet"
  }
];

console.log("Question: " + quizItems[questionCounter].question);
console.log("Answer: " + quizItems[questionCounter].correctAnswer);


$("#start-button").on("click", function() {

  // Timer
  setInterval(countdown, 1000);
  $("#timer").text(timeLeft);

  // Display Questions
  $("#question-area").text(quizItems[questionCounter].question);
  $("#answer1").text(quizItems[questionCounter].incorrect1);
  $("#answer2").text(quizItems[questionCounter].incorrect2);
  $("#answer3").text(quizItems[questionCounter].incorrect3);
  $("#answer4").text(quizItems[questionCounter].correctAnswer);



  // add event listener to all of the answers
  // Whenever any answer is clicked, do questionCounter++ so the next answers can be displayed
  // Same for timer
});


//Click events for all the guesses
$('body').on('click', '.answer', function() {

  var playerGUess = $(this).text();

  //Check the value of the button pressed to see if its right or wrong
  if (playerGUess === quizItems[questionCounter].correctAnswer) {
    console.clear()
    console.log("Correct");
  } else {
    console.clear()
    console.log("incorrect");
  }

});



// Countdown Timer Function
function countdown() {
  if (timeLeft === 0) {

  } else {
    timeLeft--;
    $("#timer").text(timeLeft);
    //console.log(timeLeft);
  }
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="jumbotron" id="gameContainer">
  <a class="btn btn-primary btn-lg" href="#" role="button" id="start-button">Start Game</a>
  <div id="mainGame">
    <div id="timer"></div>
    <div id="question-area"></div>
    <div id="answers-area">
      <div id="answer1" class="answer"></div>
      <div id="answer2" class="answer"></div>
      <div id="answer3" class="answer"></div>
      <div id="answer4" class="answer"></div>
    </div>
  </div>
</div>

Answer 2

$('.answer').click(function(e){
    var playerGUess = $(e.target).text();
    /* continue with if condition */
});

只需使用jQuery eq函数或事件点目标即可。所以在你的情况下：（1）尝试单击，检查是否正确（2）得到tex：如果事件点目标点文本等于sth（do sth）通过检查您关注的课程，还可以检查他们是否单击了正确的东西要么：选择器点eq 0点单击功能，如果此点文本与之相等，则执行某项操作。然后对“ eq 1 eq 2”和“ eq 3”重复此操作因为您有4个div或选项按钮请使用google jquery事件目标和eq函数以了解如何使用。

我试图匹配点击元素的值

2 个答案: