javascript - 如何向数据属性添加更多对象或数组

Question

我有一个带有预设数据属性 data-data='{"type":"animal","items":"20"}' 的 div 标签，由函数 A 处理( )。基于用户事件，应该使用函数 B() 将更多内容添加到数据属性，然后最终使用函数 A() 进行处理

<div id="getInfo" data-data='{"type":"animal","items":"20"}'></div>

function A() {
   var data = $('#getInfo').data('data');
   //send data to server
}

function B() {
   var long_lat = user_location_data();
   $('#getInfo').data('data');// add long_lat
}

数据属性中的信息将被发送到服务器 -> 查询数据库，如果用户允许我们获取他们的位置，用户位置将被添加到数据属性中，即 data-data='{"type":"animal ","items":"20","long":"2.35640","lat":"0.35341"}' 然后将被处理，发送到服务器。

Answer 1

您可以通过执行以下操作向数据属性添加更多数据:

$(document).ready(() => {
  var data = $('#getInfo').data('data');
  $('#getInfo').data('data', Object.assign(data, {
   long: 2.35640,
   lat: 0.35341
  }));
  
  console.log('newData', $('#getInfo').data('data'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="getInfo" data-data='{"type":"animal","items":"20"}'></div>