Question

我需要创建一个事件侦听器，当用户单击HTML中的一个列表项时将触发该事件。该操作应调用一个名为listItemText的函数，该函数返回被单击的列表项的innerText-即：如果他们点击第一个li应该记录“ alk狗”

我已经尽力想得到被点击的li项的正确对应的innerText。充其量，我可以将整个列表放回console.log或列表的最后一个元素。

在这一点上，我已经尝试了很多事情，以至于无法回忆。下面的代码或多或少是我尝试过的变体

  <ul id="todo-app">
      <li class="item">Walk the dog</li>
      <li class="item">Pay bills</li>
      <li class="item">Make dinner</li>
      <li class="item">Code for one hour</li>
  </ul>

var targetUl = document.getElementById('todo-app').childNodes;

this.addEventListener('click', listItemText);

function listItemText(event) {
  var liClicked = event.target;

  for (i=0; i<targetUl.length; i++) {
    if (liClicked == 'LI') {
      console.log(targetUl[i].innerText)
    }
  } 
}

我希望获得li标记的文本内容，但是此时我仍然不确定。帮助将不胜感激。

Answer 1

如果我正确理解，您希望单击SELECT TOP (1) Name FROM [Products] ORDER BY ProductID DESC元素的文本中的def picapp(a): x = (210*(a%4)) y=275*int((a/4%4)+1.75) if x == 0: x = 210*4 if (a/4)%4 == 0: y = 275*5 return (x, y)，所以我想您可以在下面尝试以下代码：

console.log

li

这是事件委托的原理，您无需在所有元素上都附加事件侦听器，而仅在父节点上附加事件监听器，如果事件发生，它将冒泡到父节点并使用

var targetUl = document.getElementById('todo-app').addEventListener("click",listItemText);

function listItemText(event) {
  var liClicked = event.target;
  if(liClicked && liClicked.nodeName == "LI"){
    console.log(liClicked.textContent)
  }
}

可以获取被单击的子元素的引用。

Answer 2

我现在终于弄清楚了。这样做稍有不同，但最终还是相同的想法。难以理解event.target及其工作方式。这是我的答案-先生，您的答案几乎与之相同：

var toDoList = document.getElementById("todo-app");
toDoList.addEventListener('click', listItemText);

function listItemText(e) {
  console.log(e.target.innerText);
  return e.target.innerText;
}

如何遍历无序列表以获得LI元素的innerText的console.log

2 个答案: