Question

小背景

我在javascript / jQuery中编写了一个循环遍历字段并根据它们设置它们的方法，即下拉列表，自动填充，文本等......

这样做的原因是我已经专门设计了输入和textareas样式，并且一旦页面加载，它们必须在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-*，其中*可以是任何内容。我的问题是：

我应该使用HTML5 data-*属性而不是类吗？
是否有比data-*属性或类更好的方法？
虽然data-*属性是HTML5，但只要定义了正确的DOCTYPE，它是否与早期浏览器兼容？

Answer 1

在这种情况下，它可能并不重要，因为您仍在使用有效属性（而不是随机自定义属性）。如果您认为data-*属性更具语义性，那就去吧。
不，这就是data-*属性的设计目的 - 在元素上存储任意数据。
是的，它与所有浏览器兼容。旧版浏览器会忽略它，但您始终可以使用getAttribute方法检索其值。

Answer 2

如果您正在使用这些类进行样式化，那么您也可以将它们用于jQuery选择器。实际上我相信使用类作为选择器而不是data-*属性会稍快一些。
如果您打算存储与该元素相关的一些任意数据，那么data-*属性绝对是可行的方法。
是的，它们是向后兼容的。使用jQuery，您可以使用.data()方法获取其值。如果您打算使用纯JavaScript阅读它们，则需要使用.getAttribute()的旧版浏览器进行回退。这个SO answer进一步阐述了它。

类与数据属性，自动字段初始化

小背景

问题

2 个答案: