Question

我正在使用jQuery 1.4.3。

我正在尝试确定使用data- *属性的最佳做法。在最近的过去，我创建了这样的复选框：

<input type='checkbox' id='123' class='Product' comp='1' man='1'>
<input type='checkbox' id='456' class='Product' comp='1' man='2'>
<input type='checkbox' id='789' class='Product' comp='2' man='3'>

HTML 5规范说我不应该使用自定义属性，我应该使用data- *属性。这意味着上面的复选框应该是这样的：

<input type='checkbox' id='123' class='Product' data-comp='1' data-man='1'>
<input type='checkbox' id='456' class='Product' data-comp='1' data-man='2'>
<input type='checkbox' id='789' class='Product' data-comp='2' data-man='3'>

这很容易实现，但是使用jQuery，我通常会通过他们的id调用这些元素，在这种情况下恰好是实际的产品ID。所以，我访问这些的代码就像这样：

$(".Product").click(function() {
    var ProductID = $(this).attr("id");
    alert(ProductID );
});

由于ID实际上只是我需要访问的一段数据，因此它应该是data- *属性而不是id。我认为我真正应该做的是：

<input type='checkbox' class='Product' data-prodid='123' data-comp='1' data-man='1'>
<input type='checkbox' class='Product' data-prodid='456' data-comp='1' data-man='2'>
<input type='checkbox' class='Product' data-prodid='789' data-comp='2' data-man='3'>

这意味着不再需要id来存储数据，因为我可以这样做：

$(".Product").click(function() {
    var ProductID = $(this).attr("data-prodid");
    alert(ProductID );
});

如果我想检查或取消选中特定的一组盒子，我可以这样做：

// WHEN A PRODUCT IS CLICKED 
$(".Product").click(function() {
    // GET THE COMP
    var Comp = $(this).attr("data-comp");
    // UNCHECK BOXES WITH A DISSIMILAR COMP THAN THE ONE CLICKED
    $("[data-comp]!="+Comp).attr("checked", false);
});

看起来我可以在不使用id存储数据的情况下完成所需的一切。我错了吗？这是我应该如何实现微数据存储？除CSS布局外，我不再需要id属性是否正确？我错过了什么吗？

Answer 1

这听起来很合理。 id在整个DOM中必须是唯一的。如果这些值实际上是产品标识符，请使用data-prodid。您可以拥有多个代表相同产品的DOM元素;复制data-prodid属性是完全合法的。

Answer 2

使用ID在HTML，CSS和Javascript中有其自己的含义。

HTML中的ID定义了一个唯一元素，这意味着它必须是唯一的文档。
CSS中的ID将样式规则应用于特定的块或元素。
JS中的ID将允许您使用检索元素的document.getElementById。

使用数据属性时没有任何含义。

如何实现微数据属性 - data- *并删除ID属性？

2 个答案: