ホームページ > 記事 > ウェブフロントエンド > 重要なカスタム情報を div 要素に追加するには、id、class、name などを使用する必要がありますか? _html/css_WEB-ITnose
重要なカスタム情報を div 要素に追加するには、id、class、name などを使用する必要がありますか? _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:39:371182ブラウズ
たとえば、Web モールのユーザーのショッピング カートには 50 個の prop があり、各 prop は div です。(いつでも jquery を容易にするために、prop ID を各 div 要素の属性に追加する必要があります)。 ).Capture)、たとえば、この属性の値が item-123456 である場合、id、class、または name を item-123456 として定義する必要がありますか?それとももっと良い方法があるのでしょうか？
補足1: いわゆるカスタム情報は主にWebアプリケーション内の特定の概念のIDであるため、同じ要素に同様のカスタム情報は1つだけ追加されません
補足2: 2つのpropsが想定されています2つの商品の場合、1つのdivに重ねて表示するのではなく、分けて表示することも可能です
1. IDを使用すると、IDが重複してしまいます。いくつかの実際的な例では、既存の ID を変更する必要がある場合があります。このカスタム情報を要素に追加する方法はありません
2. クラスを使用する場合、prop div 自体に「item」、「」などの複数のクラス属性が含まれる場合があります。 selected' など。 'item-123456 ' を追加すると、現在の js+jquery は prop の id 値 (つまり 123456) を取得するのに不便なようです
3. name を使用する場合、どうかはわかりません安全で安定しています。名前は入力の排他的な属性であると常に感じています
4. または、他のより良い解決策があります
アドバイスをお願いします。ありがとうございます。
ディスカッションに返信 (解決策)
属性、データを使用する -
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="item_1" itemId="item-123456"></div> <script> // 给标签设置自定义属性 // 参考 JavaScript权威指南_122_第15章_脚本化文档_15.4-属性-获取和设置非标准HTML属性 // http://blog.csdn.net/wuqinfei_cs/article/details/46753659 var item_1 = document.getElementById( "item_1" ); console.info( item_1.getAttribute( "itemId" ) ); </script> <div id="item_2" data-item-id="item-123456"></div> <script> // HTML5 的 data-* 自定义属性 // 参考 JavaScript权威指南_123_第15章_脚本化文档_15.4-属性-数据集属性 // http://blog.csdn.net/wuqinfei_cs/article/details/46753693 var item_2 = document.getElementById( "item_2" ); console.info( item_2.dataset.itemId ); </script></body></html>