jQuery和HTML5无价值（数据）属性

Question

我有用于表上的选项的数据属性，例如：

<table data-do-something-neat>
...
</table>

我正在使用HAML定义它们：

%table{ data: { do_something_neat: true } }
  ...

在HAML中，它是HTML5格式的页面，因此，如果它是布尔值和true，则它的行为是删除该值。 如果将其设置为false，它将消失，如下所示：

<table>
...
</table>

所有这些似乎都很好，但是在jQuery中访问该标志是true还是false有点麻烦，而且我找不到有关如何执行此操作的权威参考。

对于第一个表，以下是正确的：

table.is('[data-do-something-neat]') # true
table.attr('data-do-something-neat') # '' (empty string)
table.data('do-something-neat')      # '' (empty string)

对于第二张表：

table.is('[data-do-something-neat]') # false
table.attr('data-do-something-neat') # undefined
table.data('do-something-neat')      # undefined

因此， attr和data对于真正的HTML5数据属性返回错误的结论。 这是预期的吗？ 还有其他可以使用的数据方法吗？ 还是我卡住使用is这样？ 不幸的是，必须对布尔属性使用一种特殊的方法，而不是对所有数据属性都使用data 。

Answer 1

我只会使用选择器并检查是否存在正确选择的元素：

$('table[data-do-something-neat]').length !== 0

要么

$('#A').attr('myattr') !== undefined // If attribute exists

这就是这个SO问题所指出的： 按属性选择元素

或者，如果您可以不使用jQuery，则可以使用本机DOM方法：

Element.hasAttribute('data-do-something-neat');

Answer 2

区别在于，如果属性不存在，则$.attr和$.data返回undefined ，如果该属性没有值，则返回一个空字符串，据我所知，这是预期的行为。

检查有什么问题？

if (typeof table.attr('data-do-something-neat') !== 'undefined') {
    // attribute exists, but it could be the empty string
}

如果您想要一种更直接的测试方法，可以使用Element.hasAttribute

if (table[0].hasAttribute('data-do-something-neat')) {
     // attribute exists, but it could be the empty string
}

Answer 3

在使用.is（）时，这很有意义。 一些数据属性应视为布尔值，而另一些则应视为字符串。

假设attr（）对于空字符串返回true； 很难测试，并且为了使其正确显示为“ null”，您的服务器代码将需要编写：

<table
<?php if $accountId != null {?>
  data-accountId="<?php echo $accountId; ?>"
<?php } ?> >

（重点是外部空检查条件）。 但是，由于它返回一个空字符串，因此您可以简单地使用javascript并使用您喜欢的任何标准“空字符串”方法，或者如果您知道应该始终从服务器打印该属性，则只需检查“ if length == 0”。