javascript - 如何确定 ul 中的哪个 li 已被点击？

Question

我正在用 HTML/JavaScript 制作一个问答游戏，它随机选择问题并将问题和答案添加到页面（document.getElementById, innerHTML等）

我想添加一个点击监听器，这样当点击一个答案时，它将确定它是否正确。我应该如何设置这个监听器（或监听器？）来区分lis.

JavaScript

var elementQuestion = document.getElementById("question"); 
var elementAnswers = document.getElementById("answers"); 
elementQuestion.innerHTML = question[currentQuestion]; 
for(a = 0; a < answers[currentQuestion].length; a++) {
    var li = document.createElement("li");
    li.innerHTML = answers[currentQuestion][a];
    elementAnswers.appendChild(li);
}

HTML

<!-- Question -->
<p id="question"> </p>
<!-- Answer Array -->
<ul id="answers"> </ul>

（我觉得我错过了一些明显的东西......）谢谢

Answer 1

添加答案时，您还可以为此添加一个 EventListener：

elementAnswers.addEventListener("click", been_clicked, true);

在回调函数“been_clicked”中，您可以将处理事件的元素（此处：ul-node）称为“this”，并将被单击的元素称为“e.target”：

function been_clicked(e) {
   alert("You clicked '" + e.target.innerHTML + "'");
}

有关工作演示，请参阅http://jsfiddle.net/bjelline/7kSw5/ 。

Answer 2

将其插入循环：

li.onclick=create_on_click_function(li);

并添加一个新函数，它将生成 onclick 回调函数：

function create_on_click_function(element){

      return function(){
            alert(element.innerHTML + ' clicked');
      }
}

添加适当的参数来确定被点击<li>元素的id是否等于答案id。

Answer 3

如果您为每个添加一个 id <li>（如 answer_0、answer_1 等），您可以在 , 上设置一个侦听<ul>器，因为列表项上的事件会冒泡：

var elementQuestion = document.getElementById("question"); 
var elementAnswers = document.getElementById("answers"); 
elementQuestion.innerHTML = question[currentQuestion]; 
for(a = 0; a < answers[currentQuestion].length; a++) {
    var li = document.createElement("li");
    li.innerHTML = answers[currentQuestion][a];
    li.id = "answer_" + a
    elementAnswers.appendChild(li);
}
elementAnswers.addEventListener("click", function(e) {
    alert("Clicked on " + e.target.id);
});