Question

我有以下列表元素：

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

id的{{1}}是动态的，并且是从数据库中填充的。

当我点击任何项目，即动态值时，他们的li会显示为警告。

显示警报的代码：

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>的警报，如何使用ul点击li下的任何项目时显示提醒？

由于

Answer 1

There must not be multiple elements in a document that have the same id value.

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

Answer 2

元素不能具有相同的ID，但无论如何都可以具有相同的类名，不需要类名或ul元素的id attr，用Jquery很容易处理它使用下面的代码

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

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

Answer 3

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

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

如果您有多个具有相同ID的元素，则您的HTML无效。

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

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

如何提醒多组ul列表元素的目标id？

3 个答案: