javascript - 点击时定位元素

Question

我发现了一个小型的“待办事项列表”练习，其中用户单击列表项，JS 函数使用 e.target.tagName 将单击内容的背景更改为不同的颜色。

现在我知道有更简单的方法可以做到这一点，但我想尝试传递函数“查找”的事件，然后激活特定功能，但我有点卡住了。

在我的示例中，该函数查找 P 元素，而不是列表。如果我搜索 e.target.tagName == "P"，我可以得到以下内容，但是我想尝试通过 ID 进行查找。然而，当我将函数更改为读取 e.target.Id === "text"时，它不起作用。我错过了什么？

代码:

HTML:

<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>

<div id="list2">
<p id="text">Text</p>
<p id="text">Text</p>
<p id="text">Text</p>
</div>

JS:

var list = document.querySelector("ul");

list.onclick = function(e)
{
if(e.target.tagName === "LI")
{
    e.target.classList.toggle("done");
}
};


var list2 = document.getElementById("list2");

list2.onclick = function(e)
{
if(e.target.Id === "text")
{
    e.target.classList.toggle("done");
}
};

Answer 1

两个主要问题:

1) 元素不能具有相同的 id。 Id 对于元素来说是唯一的，并且不能重复。另一方面，您可以拥有多个类。

2) 解决您的主要问题，id 应该是小写，而不是大写。因此，将代码更改为:e.target.id 就可以了。

如果您还有任何其他问题，请告诉我。