从HTML标记的数据属性传递对象时的jQuery extend（）

Question

我通过HTML标记的data-options属性将选项传递给对象。 HTML标记如下所示：

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

使用jQuery的extend（）方法将data-options属性中的对象添加到默认对象中。我不确定为什么返回的Object将每个字母视为键值对。

这是一个小提琴和我的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'
}

Answer 1

多数民众赞成因为opts是一个字符串，你必须将它解析为json并将单引号替换为双引号

使用JSON.parse（）将其解析为对象，使用.replace（）替换单引号，以便将其解析为JSON对象

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

DEMO

Answer 2

您所要做的就是切换引号并删除;：

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

fiddle