jquery - 将 JSON 对象存储在 HTML jQuery 的数据属性中

Question

我使用 data- 方法在 HTML 标记中存储数据，如下所示:

<td><"button class='delete' data-imagename='"+results[i].name+"'>Delete"</button></td>

然后我在这样的回调中检索数据:

$(this).data('imagename');

效果很好。我坚持的是试图保存对象，而不仅仅是它的一个属性。我试着这样做:

<td><button class='delete' data-image='"+results[i]+"'>Delete</button></td>

然后我尝试像这样访问 name 属性:

var imageObj = $(this).data('image');
console.log('Image name: '+imageObj.name);

日志告诉我undefined。所以看起来我可以在 data- 属性中存储简单的字符串，但我不能存储 JSON 对象......

我也尝试过使用这种语法小子，但没有成功:

<div data-foobar='{"foo":"bar"}'></div>

知道如何使用 data- 方法将实际对象存储在 HTML 标记中吗？

Answer 1

其实，你的最后一个例子:

<div data-foobar='{"foo":"bar"}'></div>

似乎运行良好(参见 http://jsfiddle.net/GlauberRocha/Q6kKU/)。

好消息是 data- 属性中的字符串会自动转换为 JavaScript 对象。相反，我认为这种方法没有任何缺点!一个属性足以存储一整套数据，可以通过对象属性在 JavaScript 中使用。

(注意:要自动赋予数据属性类型 Object 而不是 String，您必须小心编写有效的 JSON，特别是用双引号将键名括起来)。