在 HTML 中适当分配 ID

Question

我是 jQuery 新手（1.5 个月），我发现自己养成了一种我不太喜欢的 PHP + jQuery 习惯。我想知道是否有人有建议让事情变得更优雅。考虑一下我通过执行简单的 SQL 查询生成并使用 PHP 进行回显的以下 HTML：

<div id='boat_1' class='boat speedboat'></div>    
<div id='boat_2' class='boat dory'></div>
<div id='car_1' class='car racecar'></div>
<div id='car_2' class='car racecar'></div>

如您所见，我选择了遵循 {type}_ 的 id 命名约定{id}。现在，在 jQuery 中，假设我想将点击处理程序绑定到这些 car div。记住它们是动态的并且可以有任意数量，我会执行：

$(".car").bind('click', function(){
//do something
});

但通常， //do some 想要知道哪辆车触发了点击事件。此外，//do some 可能需要将类型（船或汽车）和 id 分开才能执行 POST 操作并写回数据库...... （例如）

我现在正在做的查找 id（以及我需要的其他唯一信息）的操作很简单，但对我来说，它有点味道：

$(".car").bind(function(){
var id = $(this).attr("id").replace("car_", "");
});

有人可能会建议使用 class 属性，因为您不必担心独特性。但由于类名不是单一的（如我所示，每个元素可以有多个），因此我不认为这是一种候选解决方案。

因为 id 在整个文档中必须是唯一的，所以这是我已经解决的解决方案。我知道如果可以使用多个同名 id， getElementById() 会中断，但有时我想知道如果 ids 不必是唯一的（只要它们有不同的父项），这是否会有好处。

你怎么做？

我应该使用 HTML5 的 data-* 吗？

谢谢！

Answer 1

您不喜欢您的方法的哪些方面？我不希望使用 bind() 而是使用 click()。另外，如果您愿意，您可以链接这些类并更改 //do some 以改为用 _ 分割 id 并返回数组中的最终 [1] 项？ :)

你的方法似乎可以很好地获取数字 ID！ :)

Answer 2

说实话，这就是我会做的。

然而，我会以相反的方式过滤它，并使它成为一个像 这个人正确建议的函数< /a> 并从字符串中取出数字：

function pullNumber(n) { 
  return n.replace(/[^0-9]/g, ''); }

Answer 3

是的。

像这样渲染 HTML：

<div data-id="1" class="boat speedboat"></div>    
<div data-id="2" class="boat dory"></div>
<div data-id="1" class="car racecar"></div>
<div data-id="2" class="car racecar"></div>

Jquery handler

$(".car").bind(function(){
    var $this=$(this);
    var id = $this.data("id");
});

Jquery Data function

从 jQuery 1.4.3 开始，HTML 5 数据属性将自动拉入 jQuery 的数据对象。 jQuery 1.6 中对带有嵌入破折号的属性的处理进行了更改，以符合 W3C HTML5 规范。

Answer 4

我认为你的方法看起来很适合你正在做的事情，但我会指出，在 HTML 4 中，你可以使用 rel 属性，该属性实际上未使用，但是是有效的 HTML（因此它赢得了不会像 HTML4 解析器中的 data-* 那样触发警告）。我使用它，就像您建议使用 class 属性一样，但没有修改我的类的副作用。