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

标签 javascript jquery html

具体来说,我的(大量 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 这样的类用于样式目的,这似乎不必要地重复?)总而言之,这看起来很笨拙,我认为有更好的方法?

最佳答案

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

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

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

关于javascript - 在编写大量 JS 的 Web 应用程序时,我应该如何避免重复的 ID?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21409513/

相关文章:

回调完成之前发生的 JavaScript 结果

jquery - 获取命名函数以在 jQuery 中不断重复自身

jquery - Materialise slider 在 asp.net mvc 中不起作用

html - 改变坟墓的颜色。我该怎么做呢?

JavaScript : filter array of object remove all objects

c# - Javascript:如何遍历模型中的对象列表

javascript - OWL Carousel 图片一开始大小不合适

javascript - 删除表格中按钮单元格之间的空间

javascript - JS/JQ 打地鼠游戏

javascript - 将第一个数组中的元素位置与第二个数组中的数字进行比较