我想编写一个简单的jQuery插件,在指定元素下显示内联模式。我的想法是让脚本根据元素上指定的数据属性自动初始化。
一个非常基本的例子:
<p data-modal-target>Hover over me for an inline modal!</p> <div data-modal-content data-modal-align="right" data-modal-trigger="hover" data-modal-offset="10px"><!-- any desired syntax can go here --></div>
我只是想知道data-modal-target上面的示例中是否有效,还是必须这样做data-modal- target="true"?我不在乎什么比IE9更糟糕的东西,我唯一的要求就是它是有效的HTML5。
data-modal-target
data-modal- target="true"
有效,但不是布尔值。
自定义数据属性规范未提及对空属性处理的任何更改,因此关于空属性的一般规则适用于此:
可以通过仅提供属性名称而不提供值来指定某些属性。 在以下示例中,该disabled属性使用空属性语法给出: <input disabled> 请注意,空属性语法完全等同于将空字符串指定为属性的值,如以下示例所示。 <input disabled="">
可以通过仅提供属性名称而不提供值来指定某些属性。
在以下示例中,该disabled属性使用空属性语法给出:
disabled
<input disabled>
请注意,空属性语法完全等同于将空字符串指定为属性的值,如以下示例所示。
<input disabled="">
因此,允许您使用空的自定义数据属性,但是需要特殊处理才能将它们用作布尔值。
当您访问空属性时,其值为""。由于这是一个伪造的值,因此您不能仅使用它if (element.dataset.myattr)来检查属性是否存在。
""
if (element.dataset.myattr)
您应该使用element.hasAttribute('myattr')或if (element.dataset.myattr !== undefined)代替。
element.hasAttribute('myattr')
if (element.dataset.myattr !== undefined)
劳埃德的答案是错误的。他提到了指向布尔属性微语法的链接,但是data-*在规范中未将属性指定为布尔值。
data-*