javascript - 使用Jquery获取值

Question

我正在制作一个测验应用程序。控制台没有在我的代码中运行，所以我知道 jQuery 在某种程度上是错误的。我想获取该值，以便将其与答案进行比较。

$('.quizAnswers').on('submit', '.choice', function(event) {
  event.preventDefault();

  let playerAnswer = $(this).value();
  console.log(playerAnswer + " clicked");

  $(this).closest('.quizQuestion').remove();
  recieveAnswer(playerAnswer);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="quizQuestion quizSlide">
  <form class="quizAnswers">
    <input type="button" value="A" class="choice"></input>
    <input type="button" value="B" class="choice"></input>
    <input type="button" value="C" class="choice"></input>
    <input type="button" value="D" class="choice"></input>
  </form>

Answer 1

当您在按钮上收到提交事件时，JS 就会运行，但是:

• 只有表单才有提交事件
• 没有任何东西会提交表单，因为您有 type="button" 这是一个默认情况下不执行任何操作的按钮。

所以:

• 使用提交按钮(假设您为 progressive enhancement 构建服务器端代码。
• 监听点击处理程序

你的下一个问题是$(this).value();:该方法被称为val而不是value

$('.quizAnswers').on('click', '.choice', function(event) {
  event.preventDefault();
  let playerAnswer = $(this).val();
  console.log(playerAnswer + " clicked");
  $(this).closest('.quizQuestion').remove();
  //  recieveAnswer(playerAnswer);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class='quizAnswers'>
  <input type='submit' value='A' class='choice'>
  <input type='submit' value='B' class='choice'>
  <input type='submit' value='C' class='choice'>
  <input type='submit' value='D' class='choice'>
</form>