将数据推送到数据属性答案

【问题标题】：psuh data to data attribute将数据推送到数据属性
【发布时间】：2021-05-26 12:43:26
【问题描述】：

我想使用 jQuery 将数据推送到元素的数据属性。这可能吗？

元素看起来像这样：

<span id="el" data-id="[1]"></span>

我想得到

<span id="el" data-id="[1, 2]"></span>

如何做到这一点？我知道我可以使用 $('#el').data('id', [1, 2, 3, 4]); 设置数据值但是当我从 PHP 文件中获取 ids 时（因此我不知道我会得到的 ids）所以我想我必须使用类似于 push() 的东西。

【问题讨论】：

标签： javascript html jquery arrays

【解决方案1】：

您可以使用JSON.parse()然后添加数据并将其转换回字符串以将其设置为数据属性

const el = document.getElementById('el');

const pushElementToData = (elm, prop, data) => {
  const prevValue = JSON.parse(elm.dataset[prop]);
  const newValue = prevValue.concat(data);
  elm.dataset[prop] = JSON.stringify(newValue);
} 

pushElementToData(el, 'id', 2);
console.log(el.outerHTML)

&lt;span id="el" data-id="[1]"&gt;&lt;/span&gt;

【讨论】：

【解决方案2】：

我不确定。这是一个好方法吗？但它会更新属性值。

当一个新的 id 到达时，你调用updateAttribute 函数。

const element = document.getElementById('el');

const updateAttribute = (_element, attr, val) => {
  updatedVal = JSON.parse(_element.getAttribute("data-id")).concat(val);
  _element.setAttribute("data-id", JSON.stringify(updatedVal)) ;
  console.log(_element)
} 

updateAttribute(el, 'data-id', 2);

&lt;span id="el" data-id="[1]"&gt;&lt;/span&gt;

【讨论】：