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”。