從HTML標記的數據屬性傳遞對象時jQuery extend（）

我通過HTML標記的data-options屬性將選項傳遞給對象。 HTML標記看起來像這樣：從HTML標記的數據屬性傳遞對象時jQuery extend（）

<div class="js-target" data-options="{'openText':'Simon SaysOpen','closeText':'Simon Says Close','loadingText':'Simon Says Wait'};"></div>

在數據選項的對象屬性是使用jQuery的延伸（）方法被添加到缺省對象。我不確定爲什麼返回的對象將每個字母視爲關鍵值對。

Image of console

這裏有一個小提琴和我的JavaScript：http://jsfiddle.net/2eQG3/

var element = $('.js-target'); 

(function(ele) { 

    var defaults = { 
    'isOpen' : false, 
    'isItCool' : true, 
    'openText' : 'Open', 
    'closeText' : 'Close' 
    }; 

    var opts = ele.data().options; 

    console.log(opts); 
    console.log(defaults); 

    var settings = $.extend({}, defaults, opts); 
    console.log(settings); 

})(element);

我想設置對象看起來像這樣：

{ 
    'isOpen' : false, 
    'isItCool' : true, 
    'openText' : 'Simon Says Open', 
    'closeText' : 'Simon Says CLose', 
    'loadingText' : 'Simon Says Wait' 
}

來源

2013-12-17 Mdd

ÿ ou需要JSON.parse（） –

所有你必須做的是開關報價和刪除;：

<div class="js-target" data-options='{"openText":"Simon SaysOpen","closeText":"Simon Says Close","loadingText":"Simon Says Wait"}'></div>

fiddle

來源

2013-12-17 15:22:43 Tomanow

謝謝！我應該在發佈之前嘗試過。 – Mdd

那是因爲OPTS是一個字符串，你必須將其解析爲json並用雙引號替換單引號

使用JSON.parse（）來將其解析到一個對象，並.replace（）來代替單引號，使其可以將其解析到一個JSON對象

var settings = $.extend({}, defaults, JSON.parse(opts.replace(/'/g,'"').replace(';','')));

DEMO

來源

2013-12-17 15:08:33 Anton

雖然我同意這可以解決問題，但我不知道爲什麼會發生這種情況。根據API，簡單地說它是有效的json會使他的代碼工作，因爲當.data從屬性中提取數據時，它會嘗試解析以'['和'{'爲json開頭的字符串。 –

切換到'.data（「options」）'而不是'.data（）'似乎也修復了它。看起來像一個錯誤也許？ –

我會建議每當你把對象的數據屬性，使用JSON.stringify（數據），所以你不必擔心這個.. –

從HTML標記的數據屬性傳遞對象時jQuery extend（）

回答

相關問題