Javascript 在html数据属性中存储图像标记数组，并在单击时检索它们

我有一个web服务，它向我返回一个图像URL数组。我想用这些URL构造一个html图像标记数组，然后将该数组存储在一个数据属性中，以便以后调用。下面是它在我存储它的元素中的外观。这个

当我去检索新元素时，我正在运行下面的代码。图像标记被传递到一个名为Cycle2的jQuery插件中。下面的代码在遇到带有未知标记错误的“JSON.parse（）”时中断。“数据路径”中的内容是否以正确的方式构造？有没有更好的方法

var onSelect = function(e) {
    var data;   
    data = e.target.getAttribute('data-path');
    var pages = JSON.parse(data);
    for (var i = 0; i < pages.length; i++) {
        display.cycle('add', pages[i]);
    }
};

var onSelect=函数（e）{
var数据；
data=e.target.getAttribute（'data-path'）；
var pages=JSON.parse（数据）；
对于（变量i=0；i

如果这是实际的HTML，那么您的问题只是没有在字符串中转义引号：

<a data-path='["<img src=\"pics/portrait-0.png\">", "<img src=\"pics/portrait-1.png\">", "<img src=\"pics/portrait-2.png\">"]' href="#">Item 1</a>

---

但正因为这让人困惑，我可能会建议探索更干净的替代方案，比如将它们存储在一个常规javascript变量中，而不是尝试将HTML和JSON内容混合在一起——无论何时混合这种内容，都必须处理引号、转义符等的组合。，在变量中使用普通的旧字符串会更容易，而不是试图精确地确定如何格式化和解析所有内容。

如果这是实际的HTML，那么您的问题只是没有在字符串中转义引号：

<a data-path='["<img src=\"pics/portrait-0.png\">", "<img src=\"pics/portrait-1.png\">", "<img src=\"pics/portrait-2.png\">"]' href="#">Item 1</a>

---

但正因为这让人困惑，我可能会建议探索更干净的替代方案，比如将它们存储在一个常规javascript变量中，而不是尝试将HTML和JSON内容混合在一起——无论何时混合这种内容，都必须处理引号、转义符等的组合。，在变量中使用普通的旧字符串会更容易，而不是试图精确地确定如何格式化和解析所有内容。

我认为只保存数据属性上的图像路径更干净：

<a data-path='["pics/portrait-0.png", "pics/portrait-1.png","pics/portrait-2.png"]' href="#">Item 1</a>

---

然后创建一个

我认为只保存数据属性上的图像路径更干净：

<a data-path='["pics/portrait-0.png", "pics/portrait-1.png","pics/portrait-2.png"]' href="#">Item 1</a>



然后在代码本身中创建一个
，它将全部放在一行上，我只是在做多行操作，以便更容易阅读。我会更新的。在代码本身，它会在一行，我只是做了多行，使它更容易阅读这里。我将更新。您不需要循环、
JSON.parse
和jQuery
对象。使用jQuery
.data（）
，它已经返回了一个数组，并将它们变成简单的字符串（cycle将处理这个问题）@ArturFilipiak Slick示例，尽管这会比循环更有效吗？我发现循环版本更容易阅读。您不需要循环、
JSON.parse
和jQuery
对象。使用jQuery
.data（）
，它已经返回了一个数组，并将它们变成简单的字符串（cycle将处理这个问题）@ArturFilipiak Slick示例，尽管这会比循环更有效吗？我发现循环版本更容易阅读。