如何實現微數據屬性 - 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屬性？

回答

相關問題