javascript - 从 HTML 标记的数据属性传递对象时的 jQuery extend()

Question

我通过 HTML 标记的数据选项属性将选项传递给对象。 HTML 标记如下所示:

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

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

这是一个 fiddle 和我的 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