2012-02-08 7 views
1

jQuery 1.4.3を使用しています。マイクロデータ属性の実装方法 - data- *とID属性を取り除く方法は?

私は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仕様は、私がカスタム属性を使用してはならないことを、私はデータ - *属性を使用するべきであると述べています。これは上記のチェックボックスは本当にこのようでなければならないことを意味します達成するのは簡単だが、jQueryを使って、私は通常、このような場合には実際の製品IDであることを起こる、そのIDによってこれらの要素を呼ぶだろう

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

。だから、これらにアクセスするための私のコードは次のようになります:

$(".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); 
}); 

そして、私は確認したい場合、私は私が本当にやるべきことは、このだと思います私は、データを格納するためのIDを使用せずに、私は必要なすべてを達成することができますようにそれは本当に思わ

// 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); 
}); 

:やボックスの特定のグループのチェックを外し、私はこのような何かを行うことができます。私が間違っている?これは、マイクロデータストレージを実装する方法ですか? CSSレイアウト以外のid属性が不要になるのは正しいですか?私は何か不足していますか?

+0

私はちょっと混乱していますが、w3cの仕様によれば、カスタム属性には単語 'data-'が付いていて、テキストボックスID、名前、クラス属性などの入力要素には通常データなしで使用する必要がありますこれらはカスタム属性としてカウントされません。これら以外の 'comp'のようなカスタム属性は 'data-'という接頭辞で使用する必要があります。 divまたはspanには、id属性とclass属性を指定することもできます。私が間違っているなら私を訂正してください! –

答えて

1

IDを使用することは、HTML、CSS、およびJavaScriptで独自の意味を持ちます。 HTMLで

  • IDは、それが 文書内で一意である必要があります意味のユニークな要素を定義します。

  • CSSのIDは、特定のブロックまたは要素にスタイリングルールを適用します。

  • IDは、 document.getElementByIdを使用して要素を取得できます。

データ属性を使用する場合、これらの意味はありません。

+0

あなたの説明をありがとう! –

1

これは妥当と思われます。 idはDOM全体で一意でなければなりません。これらの値が実際にプロダクトIDである場合は、data-prodidを使用します。同じ製品を表すいくつかのDOM要素を持つことができます。 data-prodid属性を複製することは完全に合法です。

関連する問題