HTML5数据属性：如何修改附加到DOM元素的数据数组？

Question

我尝试用jquery修改一些HTML5数据属性。

我知道如何在这样简单的情况下进行操作：

<div id="element" data-options="HelloWorld"></div>

//Modify with jQuery :
$("#element").data("options","Bye Bye");

但就我而言，我想修改更复杂的数据选项（这是一个joomla模块）。

data-options的组织方式如下：

data-options="{"title":"Test","lat":"48.6069129","lng":"7.7612831","icon":"red","popup":1},{"title":"Test","lat":"48.6069129","lng":"7.7612831","icon":"blue","popup":2}"

例如，如何仅选择和修改图标？

Answer 1

您可以使用jQuery.fn.data的函数重载

$('#element').data('options', function(data){
   var obj = JSON.parse(data);
   obj.forEach(function(o){
       o.icon = "some other color";
   });
   return JSON.stringify(obj);
});

上面的工作假设您具有以下数据。

'[{"title":"Test","lat":"48.6069129","lng":"7.7612831","icon":"red","popup":1},{"title":"Test","lat":"48.6069129","lng":"7.7612831","icon":"blue","popup":2}]'

要正确声明json，您可以将'em放在''而不是"" ，这样可以避免转义双引号的麻烦。

Answer 2

注释：您只需要使用JSON解析将其从字符串转换为对象即可。 双引号会引起您的悲伤。

 var values = $.parseJSON($('#element').data('options'));

在标准HTML属性中包括JSON文字的唯一方法是将" ”编码为"这非常可怕：

例如

data-options=";{"title":"Test","lat":"48.6069129","lng":"7.7612831","icon":"red","popup":1},{"title":"Test","lat":"48.6069129","lng":"7.7612831","icon":"blue","popup":2}";

或者您可以使用单引号作为分隔符（虽然不是标准引号，但适用于大多数浏览器）：

data-options='{"title":"Test","lat":"48.6069129","lng":"7.7612831","icon":"red","popup":1},{"title":"Test","lat":"48.6069129","lng":"7.7612831","icon":"blue","popup":2}'