爲什麼jQuery的。數據（）函數不訪問HTML5駝峯數據屬性

Question

我在我的網頁有一個按鈕：

<button class="slideToggle" data-slideToggle="slider">SlideToggle</button> 

當這個按鈕被點擊我試圖訪問存儲數據通過使用下面的代碼在data-slideToggle屬性中，但是我什麼也沒得到。

$('body').on('click', '.slideToggle', function(){ 
    alert($(this).data('slideToggle')); 
}); 

，但它的工作原理，當我使用：

alert($(this).attr('data-slideToggle')); 

當我使用駝峯數據屬性會出現此問題。我對HTML5和jQuery非常陌生，我無法弄清楚它出了什麼問題。

Answer 1

以前所有的答案錯過一兩件事：你其實可以與現有的HTML結構工作。試想一下：

$('body').on('click', '.slideToggle', function(){ 
    alert($(this).data('slidetoggle')); // wait, what? 
}); 

要了解這裏發生了什麼，這是至關重要的檢查以下行jQuery source code：

name = "data-" + key.replace(rmultiDash, "-$1").toLowerCase(); 
data = elem.getAttribute(name); 

見，jQuery的位置如下數據集API的慣例，fooBar財產轉換爲data-foo-bar元素屬性的名稱。

就你的情況而言，它將'slideToggle'轉換爲'data-slide-toggle' - 顯然你的HTML中沒有這樣的屬性。

然而，data('slidetoggle')工作正常，如getAttribute默認執行元素的屬性之間的不區分大小寫搜索。因此，你甚至可以寫來......

<button data-sLiDeToGgLe="l33t!"></button> 

...，它仍然would have worked。 ）

不過，我寧願推薦遵循數據集API約定，將camel基於complexWord的數據屬性劃分爲帶有連字符的complex-word表示法。

Answer 2

因爲這不是你應該如何使用它。你只能使用小寫屬性，這就是爲什麼它不適合你。

變化<button class="slideToggle" data-slideToggle="slider">SlideToggle</button> 到

<button class="slideToggle" data-slidetoggle="slider">SlideToggle</button> 

和訪問它像alert($(this).data('data-slidetoggle'));

attr作品上的任何自定義屬性，所以它在那裏工作過，但data有一定的規律可循。

Spec說

自定義數據屬性是沒有命名空間的名字 開始以字符串「數據 - 」，有連字符 後至少一個字符，是XML兼容的一個屬性，不包含大寫的ASCII字母。

Answer 3

其實當你添加camalCase屬性;在瀏覽器上它被轉換成小寫;所以你必須通過

$(this).attr('data-slidetoggle') 

，並按照W3C學校（http://www.w3schools.com/tags/att_global_data.asp）

數據 - *屬性由兩個部分組成，以訪問：

1. 屬性名稱不應包含任何大寫字母和 的前綴必須至少有一個字符「data-」
2. 屬性值可以是任何字符串

Answer 4

請仔細閱讀本

• 數據 - *屬性由兩個部分組成：

  • 屬性名稱不應包含任何大寫字母，以及後必須至少一個字符長前綴 「DATA-」
  • 該屬性值可以是任意字符串

用作

<button class="slideToggle" data-slidetoggle="slider">SlideToggle</button>