Question

我仍在努力解决这个问题。

将事件处理程序添加到li元素，并将console.log（）添加到所选衬衫的名称。使用JavaScript

<h3>Shirts</h3>
<ul id='list'>
  <li>Biker Jacket</li>
  <li>Mens Shirt</li>
</ul>

Answer 1

如果我的问题是正确的，请使用jQuery：

$('li').click(function() {
  console.log($(this).text());
});

Answer 2

看起来这是一个家庭作业问题。而且你是StackOverflow的新手。

在StackOverflow上，你应该总是编写你尝试过的代码片段。

无论如何，因为你是新人...我可以告诉你两种方法来完成这个。

请注意，我在vanilla Javascript中也不是很好。所以可能有更好的方法来完成你正在尝试的事情。

1）内联事件处理程序

您可以直接向HTML添加内联事件处理程序，如下所示：

<h3>Shirts</h3>
<ul id='list'>
  <li onclick='console.log(this.innerText)'>Biker Jacket</li>
  <li onclick='console.log(this.innerText)'>Mens Shirt</li>
</ul>

2）非内联事件处理程序

这里的区别在于您需要引用要添加事件侦听器的确切元素。这样做的好处是，您不必手动向每个列表元素添加事件侦听器。所以HTML保持干净。

var list = document.getElementById("list"); // select the parent element
var items = list.getElementsByTagName("li"); // select all <li> items in this parent element

for (var i = 0; i < items.length; i++) { // loop through all items
    items[i].addEventListener("click", function() { // add the click event listener to the item
        console.log(this.innerText); // console.log() the item's text.
    });
}

另请阅读以下MDN文档以了解所使用的功能：

快乐学习！

DOM操作

2 个答案: