3

少し背景

フィールドをループし、ドロップダウン、オートコンプリート、テキストなどに応じてフィールドを設定するメソッドをjavascript/jQueryで作成しました...

この理由は、入力とテキストエリアを特別にスタイル設定しており、ページがロードされたら JavaScript で初期化する必要があるためです。このクラスのメソッドは、ページの各フィールドをループし、その内容に基づいてイベントを設定します。

現時点では、フィールドコンテナにクラスを与えることで各フィールドが何であるかを検出しています.jQueryはこのクラスを読み取り、それに応じてフィールドを次のように設定します:

<div id="company-container" class="autocomplete autocomplete-215 form-sprite">
    <input type="text" class="field" name="company" id="company" autocomplete="off" maxlength="80" tabindex="1" />
    <div class="label overflow" id="company-label">Company</div>
    <div class="glow form-sprite" id="company-glow"></div>
    <ul class="subNav"></ul>
</div>

jQuery は次のようになります。

$(options.fields).each(function(){
    // Set the field events
    SineMacula.setBlur($(this));        
    SineMacula.setFocus($(this));
    SineMacula.toggleLabel($(this));
    // If the field is a drop down then set it
    if($(this).parent().hasClass('dropdown')){
        SineMacula.setDropdown($(this).parent());
    }
    // If the field is a checkbox then set it
    if($(this).parent().hasClass('checkbox')){
        SineMacula.setCheckbox($(this).parent());
    }
    // and so on ...
});

上記のコードのほとんどは無視できますが、私が何をしているのかがわかるはずです...

質問

私は最近、HTML5 属性data-*に気付きました*。私の質問は次のとおりです。

  1. クラスの代わりにHTML5data-*属性を使用する必要がありますか?
  2. data-*属性またはクラスよりも優れた方法はありますか?
  3. data-*属性は HTML5 ですが、正しくDOCTYPE定義されていれば初期のブラウザと互換性がありますか?
4

2 に答える 2

4

  1. この場合、（ランダムなカスタム属性ではなく）まだ有効な属性を使用しているため、それほど重要ではありません。data-*属性がよりセマンティックであると思われる場合は、それを選択してください。

  2. いいえ、それがdata-*属性の設計目的です。要素に任意のデータを格納します。

  3. はい、すべてのブラウザと互換性があります。古いブラウザでは無視されますが、このgetAttributeメソッドを使用するといつでもその値を取得できます。

于 2012-10-30T10:27:48.903 に答える
2

  1. とにかくスタイリングにクラスを使用している場合は、jQueryセレクターにも使用できます。実際、属性ではなく、クラスをセレクターとして使用する方が少し速いと思います。data-*

  2. 要素に関連する任意のデータを保存する場合は、data-*属性が間違いなく最適です。

  3. はい、下位互換性があります。.data()jQueryを使用すると、メソッドを使用してそれらの値を取得できます。プレーンなJavaScriptでそれらを読む場合は、を使用する古いブラウザーのフォールバックが必要です.getAttribute()。このSOの回答は、もう少し詳しく説明しています。

于 2012-10-30T10:29:37.217 に答える