Question

我想使用像这样的数据属性将一些数据从html传递给jquery：

MainActivity

我不知道如何在jquery中使用此结构，因此它保持相同的格式（带有对象的数组）。有没有办法做到这一点？

使用string.split（＆＃39;，＆＃39;）对我没有帮助。

Answer 1

如果交换使用单引号和双引号（使其符合JSON），jQuery data method即时进行JSON解析：

每次尝试都将字符串转换为JavaScript值（包括布尔值，数字，对象，数组和null）。 [...]

当数据属性是对象（以＆＃39; {＆＃39;开头）或数组（以＆＃39; [＆＃39;开头）时，jQuery.parseJSON用于解析字符串;它必须遵循valid JSON syntax ，包括引用的属性名称。

演示：

＆＃13;

// jQuery recognises JSON:
console.log($('div').data('frames'));

＆＃13;

.as-console-wrapper { max-height: 100% !important; top: 0; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-frames='[
    { "src": "artwork-96.png",  "sizes": "96x96",   "type": "image/png" },
    { "src": "artwork-128.png", "sizes": "128x128", "type": "image/png" },
    { "src": "artwork-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "artwork-256.png", "sizes": "256x256", "type": "image/png" },
    { "src": "artwork-384.png", "sizes": "384x384", "type": "image/png" },
    { "src": "artwork-512.png", "sizes": "512x512", "type": "image/png" }
]'></div>

＆＃13;

Answer 2

~~data-frames，然后再将其分配给JSON.parse(your_data)。在使用之前获取JSON。~~

编辑：由于数据格式不正确JSON，因此有两种方法可以使用javascript访问它。

正如@trincot所指出的，将格式化data-frames放到.data，然后使用JSON方法访问它。 注意：如果数据格式不正确eval("("+your_data+")")（就像在问题中看到的那样），第二种方式（下面的第2点）将起作用。
使用object会将您的数据字符串评估为javascript JSON。 您只能在其上使用find().sort().limit()方法（即评估后）。

在使用两种方式（fiddle here和许多控制台日志）后，我认为第一种方法是更好的解决方案（正如@trincot 指出的那样）

Answer 3

JavaScript是存储复杂数据与HTML的更好工具。我更改了您的解决方案，以便您的元素包含对JavaScript中数据结构的引用，而不是原始数据本身：

＆＃13;

var data = {
    someUniqueKey: [
        { src: 'artwork-96.png',  sizes: '96x96',   type: 'image/png' },
        { src: 'artwork-128.png', sizes: '128x128', type: 'image/png' },
        { src: 'artwork-192.png', sizes: '192x192', type: 'image/png' },
        { src: 'artwork-256.png', sizes: '256x256', type: 'image/png' },
        { src: 'artwork-384.png', sizes: '384x384', type: 'image/png' },
        { src: 'artwork-512.png', sizes: '512x512', type: 'image/png' }
    ]
};

$('div[data-frames]').each(function(i, el) {
    var key = $(el).data('frames');

    console.log(data[key]);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div data-frames="someUniqueKey"></div>

＆＃13;

Answer 4

如果数据集是刚性的，那么在纯JS中你可以按照以下方式执行

＆＃13;

var datas = document.getElementById("datas");
     data = JSON.parse(datas.dataset.frames.replace(/(\w+):\s*'([\w\:\.\-\\\/]+)'/g, "\"$1\": \"$2\""));
console.log(data);

＆＃13;

.as-console-wrapper { max-height: 100% !important; top: 0; }

＆＃13;

<div id="datas" data-frames="[
    { src: 'artwork-96.png',  sizes: '96x96',   type: 'image/png' },
    { src: 'artwork-128.png', sizes: '128x128', type: 'image/png' },
    { src: 'artwork-192.png', sizes: '192x192', type: 'image/png' },
    { src: 'artwork-256.png', sizes: '256x256', type: 'image/png' },
    { src: 'artwork-384.png', sizes: '384x384', type: 'image/png' },
    { src: 'artwork-512.png', sizes: '512x512', type: 'image/png' } ]"></div>

＆＃13;

Answer 5

您可以使用jQuery的parseJSON()功能。

https://api.jquery.com/jQuery.parseJSON/

Javascript字符串对象到数组

5 个答案:

演示：