如何实现微数据属性-data- *并摆脱ID属性? [英] How to implement microdata attributes -- data-* and getting rid of the ID attribute?

问题描述

我正在使用jQuery 1.4.3.

I am using jQuery 1.4.3.

我正在尝试确定使用data- *属性的最佳实践.在最近的过去，我创建了这样的复选框:

I am trying to determine a best practice for using data-* attributes. In the recent past, I have created checkboxes like this:

<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- *属性.这意味着上面的复选框应该确实是这样的:

The HTML 5 spec says that I shouldn't use custom attributes and that I should use data-* attributes. Which means that the above checkboxes should really be like this:

<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.因此，我访问这些代码的代码将是这样的:

That's easy enough to accomplish, but with jQuery, I would usually call these elements by their id, which in this case happens to be the actual product id. So, my code to access these would be like this:

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

由于ID实际上只是我需要访问的一条数据，因此它应该是data- *属性而不是ID.我认为我真正应该做的是这样:

Since the ID is really just a piece of data that I need to access, it should be a data-* attribute instead of an id. I think what I really should be doing is this:

<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不再是存储数据所必需的，因为我可以这样做:

This means that the id is no longer necessary for storing data, because I can do this:

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

如果我要选中或取消选中一组特定的框，可以执行以下操作:

And if I want to check or uncheck a specific GROUP of boxes, I can do something like this:

// 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属性是否正确?我想念什么吗?

It really seems like I can accomplish everything I need without using the id for storing data. Am I wrong? Is this how I should implement microdata storage? Is it correct that I will no longer need the id attribute except for CSS layout? Am I missing anything?

推荐答案

在HTML，CSS和Javascript中，使用ID具有其自身的含义.

Using ID has its own meaning in HTML,CSS and Javascript.

HTML中的

• ID定义了一个唯一元素，这意味着它在广告中必须是唯一的 文档.

• ID in HTML defines an unique element meaning it must be unique in a document.

ID将样式规则应用于特定的块或元素.

ID in CSS applies styling rules to a specific block or element.

ID可让您使用检索元素 document.getElementById.

ID in JS will allow you to retrieve the element using document.getElementById.

使用data属性时，您没有任何意义.

You don't have any of those meaning when you use data attribute.

这篇关于如何实现微数据属性-data- *并摆脱ID属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！