从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（）

回答

相关问题