如何针对同一 ID 的不同实例单独触发事件

Question

我有一个列表，我想使用相同的 javascript 代码单独触发一个事件，而不需要为每个列表定义一个 ID。例如，我希望当我单击每个项目时，内部文本会更改为它所说的颜色。换句话说，我希望代码知道我点击的位置并将该功能应用于该特定项目，并且不想使用 id=color1"、id=color2"、id=color3"。感谢任何帮助！

<ul>
<li onclick="jsCode" id="color">Red<li>
<li onclick="jsCode" id="color">Blue<li>
<li onclick="jsCode" id="color">Green<li>
</ul>

Answer 1

我认为最简单的方法是向每个引用颜色的列表项添加一个 data attribute，然后将该颜色（在 CSS 中定义）添加到元素的classList.

const list = document.querySelector('ul');
list.addEventListener('click', handleClick, false);

function handleClick(e) {
  if (e.target.matches('li')) {
    const { id } = e.target.dataset;
    e.target.classList.add(id);
  }
}

.red { color: red; }
.blue { color: blue; }
.green { color: green; }
li:hover { cursor: pointer; }

<ul>
  <li data-id="red">Red</li>
  <li data-id="blue">Blue</li>
  <li data-id="green">Green</li>
</ul>

其他文档

• classList

• matches

• addEventListener

• Destructuring assignment

---

或者，如果您不想使用数据属性，请从每个列表项的文本内容中选取颜色。

const list = document.querySelector('ul');
list.addEventListener('click', handleClick, false);

function handleClick(e) {
  if (e.target.matches('li')) {
    const { textContent } = e.target;
    const color = textContent.toLowerCase();
    e.target.classList.add(color);
  }
}

.red { color: red; }
.blue { color: blue; }
.green { color: green; }
li:hover { cursor: pointer; }

<ul>
  <li>Red</li>
  <li>Blue</li>
  <li>Green</li>
</ul>

Answer 2

Warning: Your problem here is that XHTML standards do not allow multiple elements with the same ID. This is simply not allows in XML, XHTML, or HTML 5. This is not just bad practice, but code which will most likely break in production as your application gets larger and less maintainable.

---

解决方案 1：使用 类

如果您使用相同的 ID 以便以相同的方式设置元素的样式，那么您应该使用 类:

<li class="color" id="red">Red</li>
<li class="color" id="blue">Blue</li>
<li class="color" id="green">Green</li>

---

解决方案 2：使用 querySelectorAll

使用 document.getElementById 将仅定位具有指定 ID 的第一个元素（参考上面的警告）。

如果您仍然坚持让多个元素具有相同的 ID，那么还有一个解决方案（但请谨慎操作）。

document.querySelectorAll 将接受查询选择器（类似于 CSS 选择器）作为参数并查找与提供的查询选择器匹配的所有元素。所以 document.querySelectorAll('li') 将 return 一个 NodeList （类似于数组）的 <li /> 元素。您可以使用相同的函数通过 id="color":

获取所有元素

const colors = Array.from(document.querySelectorAll('#color'));

colors.forEach(listItem => {
    const color = listItem.textContent.toUpperCase();

    listItem.addEventListener('click', () => {
        alert(`You clicked on ${color}`);
    });
});

您可以查看此代码笔进行演示：https://codepen.io/virajshah21/pen/gOvvqEj