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. 是的，它们是向后兼容的。使用 jQuery，您可以使用该.data()方法获取它们的值。如果您打算使用纯 JavaScript 阅读它们，则需要为使用.getAttribute(). 这个SO answer对此进行了详细说明。

于 2012-10-30T10:29:37.217 回答