Question

我正在创建一个多项选择测验，并且我在实施onClick侦听器时遇到了困难。

我尝试使用jQuery在选择按钮时创建警报，但这似乎不起作用。

有人可以看看它为什么没有被触发？另外，我如何传递列表项的内容？

<body>
  <div class="central-area" id="central-area">
    <div class="main multiple-choice">
      <div class="question-row row column">
        <div id="questionText" class="question-text">to be</div>
      </div>
      <div class="hint row column"> <span class="hint-text">Select the correct <strong>French</strong> for the <strong>English</strong> above:</span> </div>
      <ol id="choices" class="choices ">
        <li class="choice " id="0"><span class="val">prêter</span><span class="marking-icon "></span></li>
        <li class="choice " id="1"><span class="val">vêtir</span><span class="marking-icon "></span></li>
        <li class="choice " id="2"><span class="val">être</span><span class="marking-icon "></span></li>
        <li class="choice " id="3"><span class="val">tirer</span><span class="marking-icon "></span></li>
      </ol>
    </div>
  </div>
</body>

使用Javascript：

function guess(choice) {
  if (choice === "être") {
    alert("Correct");
    //Add correct class to chosen button
  } else {
    alert("Incorrect");
    //Add incorrect class to chosen button
    //Time delay, then add correct class to correct button
  }
}

$( "li" ).click(function() {
  alert( "Handler for .click() called." );
  // guess(choice);
});

这是当前情况的重复：https://jsfiddle.net/a5j4zncv/16/

Answer 1

您还没有添加JQuery库：

＆＃13;

function guess(choice) {
  if (choice === "être") {
    alert("Correct");
    //Add correct class to chosen button
  } else {
    alert("Incorrect");
    //Add incorrect class to chosen button
    //Time delay, then add correct class to correct button
  }
}

$("li").on('click', function() {
  alert("Handler for .click() called.");
  guess($(this).text());
});

＆＃13;

.choice:hover {
  cursor: pointer;
}

.choice.correct {
  color: green;
}

.choice.incorrect {
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="central-area" id="central-area">
    <div class="main multiple-choice">
      <div class="question-row row column">
        <div id="questionText" class="question-text">to be</div>
      </div>
      <div class="hint row column"> <span class="hint-text">Select the correct <strong>French</strong> for the <strong>English</strong> above:</span> </div>
      <ol id="choices" class="choices ">
        <li class="choice " id="0"><span class="val ">prêter</span><span class="marking-icon"></span></li>
        <li class="choice " id="1"><span class="val ">vêtir</span><span class="marking-icon"></span></li>
        <li class="choice " id="2"><span class="val ">être</span><span class="marking-icon"></span></li>
        <li class="choice " id="3"><span class="val ">tirer</span><span class="marking-icon"></span></li>
      </ol>
    </div>
  </div>
</body>

＆＃13;

Answer 2

你走了。你必须从每个li中选择文本然后进行比较。同样正如Milan Chheda指出的那样，你必须包括JQ库。

＆＃13;

function guess(choice) {
  var ch = $(choice).text();
  if (ch == "être") {
    alert("Correct");
    //Add correct class to chosen button
  } else {
    alert("Incorrect");
    //Add incorrect class to chosen button
    //Time delay, then add correct class to correct button
  }
}

$( "#choices li" ).click(function() {
    guess(this);
  //alert( "Handler for .click() called." );
  // guess(choice);
});

＆＃13;

.choice:hover {
  cursor: pointer;
}

.choice.correct {
  color: green;
}

.choice.incorrect {
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="central-area" id="central-area">
    <div class="main multiple-choice">
      <div class="question-row row column">
        <div id="questionText" class="question-text">to be</div>
      </div>
      <div class="hint row column"> <span class="hint-text">Select the correct <strong>French</strong> for the <strong>English</strong> above:</span> </div>
      <ol id="choices" class="choices ">
        <li class="choice " id="0"><span class="val ">prêter</span><span class="marking-icon"></span></li>
        <li class="choice " id="1"><span class="val ">vêtir</span><span class="marking-icon"></span></li>
        <li class="choice " id="2"><span class="val ">être</span><span class="marking-icon"></span></li>
        <li class="choice " id="3"><span class="val ">tirer</span><span class="marking-icon"></span></li>
      </ol>
    </div>
  </div>
</body>

＆＃13;

OnClick侦听器列出项目

2 个答案: