默認設置data- html5值

Question

我有這個小代碼，可以使用自定義屬性將一些預設樣式添加到div ，該屬性將src和APA文本設置為img標簽，還可以使用FancyBox生成帶有縮放選項的按鈕...我有點新jQuery世界，所以也許我以錯誤的方式使用了data屬性...

問題是，是否可以在$(document).ready之前設置具有默認值的數據HTML5屬性？ 我的意思是：

<!--In the text editor:-->
<div data-boolean></div>
<!--In the code inspector after browser render:-->
<div data-boolean="true"></div>

我嘗試使用以下方法：

var $me = $(this),    
    $meData = $me.data(),
    $meZoom  = ($meData.sgImgzoom) ? $meData.sgImgZoom : true ;

但是沒有用，當我創建該attr的console.log()時，我得到一個空字符串，而不是布爾變量。 僅當我手動將值設置為true時，它才顯示為布爾值。

對於

<div data-sg-img-zoom data-sg-src="img/test.jpg" data-sg-apa="APA Test Text!"></div> 

console.log代碼：

$.each($meData, function(i,v) {
             console.log(i + ' = ' + v + ' (' + typeof(v) + ')');
        }); 

瀏覽器響應：

sgApa = APA Test Text! (string)
sgSrc = img/test.jpg (string)
sgImgZoom =  (string)

對於：

<div data-sg-img-zoom="false" data-sg-src="img/test-2.jpg" data-sg-apa="APA Test Text!"></div>

瀏覽器響應：

sgApa = APA Test Text! (string)
sgSrc = img/test-2.jpg (string)
sgImgZoom = false (boolean)

而且我嘗試了類似的方法，但使用了類似APA的不同屬性，並且似乎可以工作...所以我不知道。

對於

 <div data-sg-img-zoom="false" data-sg-src="img/test-3.jpg" data-sg-apa></div>

和

$meApa  = ($meData.sgApa) ? $meData.sgApa : "You must use APA text if data-sg-apa attr used";

data-sg-apa將是“如果使用data-sg-apa attr，則必須使用APA文本”，直到您將該屬性留空...

編輯在這個站點上閱讀一些類似的問題，我想我可以說我“解決”了問題。 在.data()文檔中已提及

數據屬性在第一次訪問數據屬性時被拉出，然后不再被訪問或變異（所有數據值然后在內部存儲在jQuery中）

您也可以在這篇文章中看到

使用Chrome DevTools控制台檢查DOM， $('#foo').data('helptext', 'Testing 123'); 不會更新控制台中顯示的值，而是$('#foo').attr('data-helptext', 'Testing 123'); 確實。

因此，您必須在設置所有數據之前進行更改，如下所示：

var tempVar = false;        
        if( $(this).data("sgImgZoom" ) === ""){
            tempVar = true;
            $(this).attr("data-sg-img-zoom",true);//optional if you want to see the "value" of that attribute, but really doesn't matters because that value and the real data value are two completely different things..
        }
        var $me     = $(this),
            $meData = $me.data(),
            $meZoom = $meData.sgImgZoom = tempVar;//set default value for data-sg-zoom

因此，現在我可以像這樣更輕松地驗證功能：

if($meZoom){ /*do the thing*/ }

現在，代碼可以按預期工作，但很明顯.attr()和.data()是兩種不同的方式，應在非常特殊的情況下使用。

現在的問題是： 對於這種特殊情況，我應該使用HTML5數據嗎？ 或者更容易使用jquery .attr()處理它

在這里查看更新代碼

Answer 1

您會看到此行為，因為jQuery data（）方法嘗試將屬性轉換為Javasript值，以下是本手冊的摘錄：

會嘗試將字符串轉換為JavaScript值（包括布爾值，數字，對象，數組和null）。

要以字符串形式檢索值的屬性而不嘗試對其進行任何轉換，請使用attr（）方法。

根據有關布爾屬性的 HTML5規范：

如果存在該屬性，則其值必須為空字符串或該屬性的規范名稱的ASCII大小寫不匹配的值，且沒有前導或尾隨空格。

布爾屬性上不允許使用值“ true”和“ false”。 為了表示一個假值，必須完全省略該屬性。

這可能是jQuery返回空字符串作為data-sg-img-zoom屬性的值的原因。

測試屬性的存在

如果您只想測試屬性data-attr初始存在，例如<div data-attr>那么jQuery data()和attr()返回undefined ，因此可以使用以下代碼：

var is_set = (typeof $(el).attr('data-attr') === 'undefined') ? true : false;

要么

var is_set = (typeof $(el).data('attr') === 'undefined') ? true : false;

測試屬性和true / false值的存在

如果要測試是否存在屬性data-attr AND值true / false例如<div data-attr> ， <div data-attr="true">和<div data-attr="false"> ，使用下面的代碼。

var el_data_attr = $(el).data('attr');
var is_set = (
      // If attribute is specified
      typeof el_data_attr !== 'undefined' 
      // And no value is given or value is evaluated to true
      && (el_data_attr === '' || el_data_attr)
   ) ? true : false;

作為副作用，屬性值1 ， foo也將被視為true ； 和0 ， null ， NaN將被視為false 。

您的示例的解決方案

由於您通過單個data()調用來檢索所有data- attribute，因此需要使用以下代碼：

var $meZoom = (
      $meData.hasOwnProperty('sgImgZoom') 
      && ($meData.sgImgZoom === '' || $meData.sgImgZoom)
) ? true : false;