javascript - 从单个 HTML5 "data-"属性创建一个数组

Question

我有这个 HTML:

<section id="SSID" data-texts="'Text1', 'Text2', 'Text3'"></section>

我想在 jQuery 中创建一个数组变量，我的 jQuery 代码是:

$(document).ready(function() {
    var Selection = $("#SSID").data("texts");
    var Texts = [ Selection ];

    console.log(Texts.length);
});

对于我的示例，我期望的结果是:

Texts[0] = 'Text1'
Texts[1] = 'Text2'
Texts[2] = 'Text3'

...并且数组 Texts 的长度为 3。

但是，我看到的是 Texts 的长度是 1 并且整个字符串正在加载到 Texts[0]:

Texts[0] = "'Text1', 'Text2', 'Text3'"

我认为我的问题是由 "(引号)字符引起的。如何克服这个问题并实现我的目标？

Answer 1

data- 属性可以包含 JSON。

如果它们在语法上有效，jQuery 会自动为您解析它们。

<section id="SSID" data-texts='["Text1", "Text2", "Text3"]'></section>

和

$(function() {
    var texts = $("#SSID").data("texts");

    console.log(texts.length);  // logs "3"
});

参见:http://jsfiddle.net/5mtre/

---

安全提示:您必须在服务器上正确编码 JSON。

这意味着您需要进行 JSON 编码和 HTML 编码，这里显示了使用 PHP 的示例:

<section id="SSID" data-texts="<?=htmlspecialchars(json_encode($data), ENT_QUOTES, 'UTF-8')?>"></section>