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}"

我如何 select 并仅修改图标？

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，您可以将它们放在 '' 而不是 "" 中，这将使您免于转义双引号的麻烦。

Answer 2

来自评论：您只需要使用 JSON 解析将其从字符串转换为对象。不过，双引号会让您感到悲伤。

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

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

例如

data-options=";{&quot;title&quot;:&quot;Test&quot;,&quot;lat&quot;:&quot;48.6069129&quot;,&quot;lng&quot;:&quot;7.7612831&quot;,&quot;icon&quot;:&quot;red&quot;,&quot;popup&quot;:1},{&quot;title&quot;:&quot;Test&quot;,&quot;lat&quot;:&quot;48.6069129&quot;,&quot;lng&quot;:&quot;7.7612831&quot;,&quot;icon&quot;:&quot;blue&quot;,&quot;popup&quot;: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}'

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

HTML5 data-attributes : How to modify array of data attached to DOM element?

javascript

jquery

html

custom-data-attribute