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可以解决问题。

如果您有任何其他问题，请与我们联系。

Answer 2

问题出在e.target.Id。它应id（小写），因为javascript是区分大小写的语言。

＆＃13;

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");
}
};

＆＃13;

.done{
  background-color:greenyellow;
}

＆＃13;

<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>

＆＃13;

点击

2 个答案: