如何警告多组ul列表元素的目标id

How to Alert target id of multiple sets of ul list elements?

本文关键字：列表元素 ul 目标 id 何警告 警告      更新时间：2023-09-26

我有如下列表元素:

<ul id="listSet">
<li id="dy1">Dynamic values</li>
<li id="dy2">Dynamic values</li>
</ul>

li的id是动态的，由数据库填充。

当我点击任何项目，即动态值，他们的id显示为警报。

显示警告的代码:

function getEventTarget(e) {
    e = e || window.event;
    return e.target || e.srcElement; 
}
var ul = document.getElementById('listSet');
ul.onclick = function(event) {
    var target = getEventTarget(event);
    alert(target.id);
};

但我有多组ul从数据库检索，例如:

<ul id="listSet">
<li id="dy1">Dynamic values</li>
<li id="dy2">Dynamic values</li>
</ul>
<ul id="listSet">
<li id="dy3">Dynamic values</li>
<li id="dy4">Dynamic values</li>
</ul>

<ul id="listSet">
<li id="dy5">Dynamic values</li>
<li id="dy6">Dynamic values</li>
</ul>

对alert使用相同的脚本，显示只对第一组ul点击alert，当点击li和ul id = "listSet"下的任何项目时如何显示警报?

谢谢

一个document中不能有多个elements具有相同的id值

使用class代替ID属性和getElementsByClassName或querySelectorAll来选择元素。

[].forEach.call用于迭代具有length属性的元素，for-loop也可以使用。

function getEventTarget(e) {
  e = e || window.event;
  return e.target || e.srcElement;
}
var ul = document.getElementsByClassName('listSet');
[].forEach.call(ul, function(el) {
  el.onclick = function(event) {
    var target = getEventTarget(event);
    alert(target.id);
  };
});
<ul class="listSet">
  <li id="dy1">Dynamic values</li>
  <li id="dy2">Dynamic values</li>
</ul>
<ul class="listSet">
  <li id="dy3">Dynamic values</li>
  <li id="dy4">Dynamic values</li>
</ul>
<ul class="listSet">
  <li id="dy5">Dynamic values</li>
  <li id="dy6">Dynamic values</li>
</ul>

HTML规范要求ID属性在一个页面中是唯一的:

该属性为元素指定一个名称。此名称在文档中必须唯一。

如果你有几个元素具有相同的ID，你的HTML是无效的。

所以，getElementById()应该只返回一个元素。你不能让它返回多个元素。

您可以使用getElementByClassName，然后在所有检索到的元素上使用某种循环，并在它们上附加事件。

元素不能有相同的ID，但可以有相同的类名，不需要类名或ul元素的ID属性。用Jquery很容易处理使用以下代码

$("li").on("click",function(){
id=$(this).attr("id");
alert(id);
});

并在下面的链接中查看实时演示https://jsfiddle.net/kjakzc7d/

相关文章：