我尝试使用 jquery 修改一些 HTML5 数据属性。
我知道怎么做,就像这样简单:
<div id="element" data-options="HelloWorld"></div>
//Modify with jQuery :
$("#element").data("options","Bye Bye");
但就我而言,我想修改一个更复杂的数据选项(它是一个 joomla 模块)。
数据选项是这样组织的,包含一组数据:
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}"
例如,我如何仅选择和修改图标?
最佳答案
您可以使用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 放在 ''
中,而不是 ""
这将使您免于转义双引号的麻烦。
关于javascript - HTML5 数据属性 : How to modify array of data attached to DOM element?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27940973/