Question

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

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

我正在使用HAML来定义它们：

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

在HAML中，它是一个HTML5格式的页面，所以它的行为是删除值，如果它是布尔值和true。如果它被设置为false，它就会消失，就像这样：

<table>
...
</table>

所有这一切似乎都很好，但是在jQuery中访问该标志是真还是假是有点痛苦，我找不到任何关于如何做的确切参考。

对于第一个表格，以下情况属实：

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

这就是在这个问题中提到的：Select elements by attribute

或者，如果你可以不使用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;它很难测试，并且为了让它正确地显示为＆＃39; null＆＃39;，您的服务器代码需要编写：

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

（重点是外部空检查条件）。但是，因为它返回一个空字符串，你可以简单地使用javascript并使用任何标准＆＃34;是空字符串＆＃34;您喜欢的方法，或只是检查＆＃34;如果长度== 0＆＃34;如果你知道应该始终从服务器打印属性。

jQuery和HTML5无值（数据）属性

3 个答案: