javascript - 在编写大量 JS 的 Web 应用程序时，我应该如何避免重复的 ID？

Question

具体来说，我的(大量 JS)网页区域包含 HTML 元素列表，为了简单起见，我们假设只有两个列表:A 和 B。我们还可以说当我单击列表 A 中的第一项时(A1) 列表 B (B1) 中的第一项发生了一些情况。

我为列表 A 中的每个元素指定了一个通用 HTML 类和一个 ID(如 <li class='listAmember' id='1'>...</li> )。我以类似的方式在列表 B 中设置元素(如 <li class='listBmember' id='1'> )。然后我附上了一些click处理程序(在本例中使用 jQuery)并遇到了重复 ID 的问题，即使我使用类名限定了 jQuery 基于 id 的选择器，如下所示

$('.listAmember#1').click(function(){});

我意识到这是不好的做法(ID 在文档中应该是唯一的!)，但我不确定有什么好的替代方案。

我真的不想创建像 listAmember-1 这样的 ID因为如果我的 JS 代码中有一个以数字 ID 为键的查找表，我需要解析出 1从该 ID 字符串中获取“真实”ID。 (而且我仍然需要添加一个像 listAmember 这样的类用于样式目的，这似乎不必要地重复？)总而言之，这看起来很笨拙，我认为有更好的方法？

Answer 1

正如 Florent 所说，我会尝试完全避免使用 ID。一种约定是使用诸如 js-list-a 之类的类名来表示它是一个仅供 JavaScript 使用的类。然后您就可以开始使用列表中 li 的索引了。

此外，您可以在列表中设置一个click 处理程序并使用 event delegation .

这些想法的结合意味着您不必接触 ID。