Question

我已经开始工作，但我想知道是否有一种直接的方式来完成更新。我有一个已分配数据属性的div。单击div时，我希望更新data属性中的一个属性。

import {ChatMessage} from 'components/Chat';

Answer 1

您可以使用.data()存储原始对象并直接对其进行变更，而无需使用.data()方法再次存储它：

var originalObj = {
  "x": 5,
  "y": 58,
  "selected": 'no'
};

$('#test').data('objData', originalObj);

$('#test').on('click', function(event) {
    $(this).data('objData')['selected'] = 'yes';
    console.log($(this).data('objData'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="test">test me</button>

说明

上述解决方案假设您愿意更改对象与元素一起存储的方式。另一方面，如果值必须存储在元素属性中，那么代码中没有太多可以改进的值。您采取的步骤是必要的（从/转换为JSON，从属性读取，写入属性，等等）。

但请注意，写入元素属性不是最佳实践。如果有的话，您应该使用.prop()支持.attr()：它会带来更快的代码。但是在咨询元素属性时你不会看到变化。换句话说，您不能将.prop()与.attr()混合。

如果这方面没有变化的余地，那么我建议您在CodeReview上提出这个问题。

Answer 2

我将更新分成了自己的功能

$('[data-example]').click(function() {
  function update(object) {
    object.foo = 'bar';
    return object;
  }

  var original = this.dataset.example;
  original = original && JSON.parse(original) || {};
  this.dataset.example = JSON.stringify(update(original));
});

更新数据属性对象属性值

2 个答案:

说明