-1

我在当前项目中使用 jQuery，我基本上想为 JSON 数组中的每个图像 src 动态创建一个图像，这是 HTML data-* JSON 数组：

<div class="" data-slides='{
    "imgs" : [{
    "img" : "//placekitten.com/g/200/300",
    "img" : "//placekitten.com/g/200/300",
    "img" : "//placekitten.com/g/200/300",
}]}'>

我想需要一些'for img in imgs'逻辑，我以前从未处理过它。我怎么能一一说“警报”“imgs”数组的内容？：） 谢谢！

4

3 回答 3

4

好吧，目前它只是一个字符串。顺便说一句，您的格式是“错误的”-您正在混合数组和对象（错误的，除非您想要对象内的对象数组-> 3维）。

我建议使用：

<div class="" data-slides='{
    "imgs" : {
    "img1" : "//placekitten.com/g/200/300",
    "img2" : "//placekitten.com/g/200/300",
    "img3" : "//placekitten.com/g/200/300"
}}'>

或者：

<div class="" data-slides='{
    "imgs" : [
    "//placekitten.com/g/200/300",
    "//placekitten.com/g/200/300",
    "//placekitten.com/g/200/300"
]}'>

假设您将内容提取到 var：

var slides = $('div').data('slides'); // or use id instead of div

幻灯片 = JSON.parse(幻灯片); //将JSON字符串解析成一个对象

现在您可以通过（第一种方式）访问它们：

var key;
for(key in slides.imgs)
    alert(slides.imgs[key]);

或通过数组方式：

for(var i = 0, img; img = slides.imgs[i]; i++)
    alert(img);

或通过第三种方式（作为单独的解决方案）：

alert($('div').data('slides').imgs.img1);

后者需要一个对象中的对象才能工作（作为 1. 建议）。

基于小提琴，这里的修改显示了一种方式：http:
//jsfiddle.net/Evcwx/1/

（如果你只需要一个简单的数组，你可以在那里放入一个纯数组，而不是首先使用 imgs - jQuery 检查 { 或 [ 并会自动为你解析它）。

于 2013-05-28T17:37:13.013 回答
1

我完全同意@Ken 的观点，您应该使用更好的 JSON 结构。如果你使用的是 jQuery，你可以直接使用data()来获取解析后的对象。引用文档：

当数据属性是对象（以'{'开头）或数组（以'['开头）时，则jQuery.parseJSON用于解析字符串；它必须遵循有效的 JSON 语法，包括引用的属性名称。如果该值不可解析为 JavaScript 值，则将其保留为字符串。

所以我在这里创建了一个小小提琴，它基本上使用data()如下：

var slides = $("#slider").data("slides");
于 2013-05-28T18:02:33.110 回答
0

请务必在您的属性中使用有效的 JSON。看起来您打算使用：

<div class="" data-slides='{
    "imgs" : [
        {"img": "//placekitten.com/g/200/300"},
        {"img": "//placekitten.com/g/200/300"},
        {"img": "//placekitten.com/g/200/300"}
    ]
}'>

可以使用以下方式访问：

var slides = $('[data-slides]').data('slides');

如果可以将 JSON 值成功解析为对象，该.data()方法将自动将它们转换为对象，因此要迭代您可以使用的集合：

var index;
for (index in slides.imgs) {
    alert(slides[index].img);
}

或者对于迭代集合的“jQuery方式”（使用jQuery.each）：

$.each(slides.imgs, function () {
    alert(this.img);
});

话虽如此，原始结构非常冗长，它确实可以简化为单个数组：

<div class="" data-slides='[
    "//placekitten.com/g/200/300",
    "//placekitten.com/g/200/300",
    "//placekitten.com/g/200/300"
]'>

这将被迭代为：

var slides = $('[data-slides]').data('slides');
$.each(slides, function () {
    alert(this);
});
于 2013-05-28T18:17:53.480 回答