如何实现微数据属性 - data- *和摆脱ID属性？

我正在使用jQuery 1.4.3。如何实现微数据属性 - data- *和摆脱ID属性？

我想确定使用数据属性的最佳做法。在最近的过去，我创建了复选框这样的：

<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规范说我不应该使用自定义属性，我应该用数据 - *属性。这意味着，上述复选框真的应该是这样的：

<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实际上只是一块，我需要访问数据的，它应该是一个数据 - *属性的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来存储数据。我错了吗？这是我应该如何实施微数据存储？是否正确，我不再需要id属性，除了CSS布局？我错过了什么？

来源

2012-02-08 Evik James

我有点困惑，但根据w3c规范，任何自定义属性都应该以单词'data-'作为前缀，并且在像文本框id这样的输入元素中，名称和类属性应该正常使用，而不需要数据，我认为这些不被视为自定义属性。除了这些像“comp”这样的自定义属性，它应该与前缀“data-”一起使用。 div或span也可以具有id和class属性。如我错了请纠正我！ – 2012-02-08 16:50:27

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

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

当您使用数据属性时，您没有任何这些含义。

来源

2012-02-08 16:57:47

谢谢你的解释！ – 2012-02-09 18:05:08

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

来源

2012-02-08 16:50:46

如何实现微数据属性 - data- *和摆脱ID属性？

回答

相关问题