OnClick侦听器列出项目

时间:2017-08-13 11:51:05

标签: javascript jquery html

我正在创建一个多项选择测验,并且我在实施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/

2 个答案:

答案 0 :(得分:0)

您还没有添加JQuery库:

&#13;
&#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;
&#13;
&#13;

答案 1 :(得分:0)

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

&#13;
&#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;
&#13;
&#13;