在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>

如您所见,我选择了后面的id命名约定{type}_{id}.现在,在jQuery中,假设我想将一个单击处理程序绑定到这些car div.记住它们是动态的,可能有任意数量,我会执行:

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

但通常情况下,//do something我想知道哪辆车开了点击事件.此外,这//do something可能需要分离类型(船或汽车)和id执行POST操作并写回数据库...(例如)

我现在正在做的是找到id(以及我需要的其他独特信息)很简单,但对我来说,它闻起来:

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

有人可能会建议使用class属性,因为您不必担心唯一性.但是因为类名不是单数(每个元素可以有多个,如我所示),我不认为这是候选解决方案.

因为id在整个文档中必须是唯一的,所以这是我已经解决的解决方案.我知道getElementById()会在多个同名的ID成为可能的情况下中断,但有时我想知道如果id不必是唯一的,只要它们有不同的父级,这是否有益.

你怎么做呢？

我应该使用HTML5 data-*吗？

谢谢!

Answer 1

是.

像这样渲染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处理程序

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

Jquery数据功能

从jQuery 1.4.3开始,HTML 5数据属性将自动引入jQuery的数据对象.在jQuery 1.6中改变了嵌入破折号属性的处理,以符合W3C HTML5规范.