javascript - 使用 Javascript 或 jquery 动态显示多个图像

Question

我正在使用 Gridster网页小部件。有一个 JSON 提供有关每个网格上应该有什么图像的数据(捕获来自 JSON 的文本，然后加载数据库中的相应图像)。目前我能够在网格上显示单个图像。我的目标是在网格上显示多张图片。多张图片将在json中以逗号分隔的名称。

当前的 JSON 格式为:

var json = [{
    "html": 'abc.png',
    "col": 1,
    "row": 1,
    "size_y": 2,
    "size_x": 2
}, {
    "html": "xyz.png",
    "col": 4,
    "row": 1,
    "size_y": 2,
    "size_x": 2
},
{
    "html": "def.png",
    "col": 6,
    "row": 1,
    "size_y": 2,
    "size_x": 2
},
{
    "html": "abc.png",
    "col": 1,
    "row": 3,
    "size_y": 1,
    "size_x": 1
}, {
    "html": "def.png",
    "col": 4,
    "row": 3,
    "size_y": 1,
    "size_x": 1
},
{
    "html": "abc.png    ",
    "col": 6,
    "row": 3,
    "size_y": 1,
    "size_x": 1
}

];

每个网格只有一张图片

新的 JSON 格式如下:

var json = [{
    "html": "abc.png,xyz.png,def.png',  //3 Images
    "col": 1,
    "row": 1,
    "size_y": 2,
    "size_x": 2
}, {
    "html": "xyz.png", //1 Image
    "col": 4,
    "row": 1,
    "size_y": 2,
    "size_x": 2
},
{
    "html": "def.png,abc.png", //2 Images
    "col": 6,
    "row": 1,
    "size_y": 2,
    "size_x": 2
},
{
    "html": "abc.png", //1 Image
    "col": 1,
    "row": 3,
    "size_y": 1,
    "size_x": 1
}, {
    "html": "def.png,abc.png", //2 Images
    "col": 4,
    "row": 3,
    "size_y": 1,
    "size_x": 1
},

{
    "html": "abc.png", // 1 Image
    "col": 6,
    "row": 3,
    "size_y": 1,
    "size_x": 1
}

];

这么旧的形式就像

 "html":"image1"

新的形式就像

"html":"image1,image2,....imageN"

创建widgets的JS如下:

for(var index=0;index<json.length;index++) {
  {% load static %}
  gridster.add_widget('<li class="new" ><button class="delete-widget-button" style="float: right;">-</button><img src="{% get_static_prefix %}images/'+json[index].html+'"></li>',json[index].size_x,json[index].size_y,json[index].col,json[index].row);
 };

我不明白上面的循环将如何处理多张图片

Fiddle Link

更新 1

Updated Fiddle Link

Answer 1

我不熟悉 gridster，但也许这对你有用 -

拆分图像文件名字符串，然后让另一个嵌套循环构建输出字符串 -

var images = json[index].html.split(',');
var imageOutput = "";

for(var j = 0; j < images.length; j++) {
    imageOutput += '<img src="{% get_static_prefix %}images/'+ images[j] +'">';
}

gridster.add_widget('<li class="new" ><button class="delete-widget-button" style="float: right;">-</button>' + imageOutput + '</li>',json[index].size_x,json[index].size_y,json[index].col,json[index].row);

https://jsfiddle.net/joqfgr2t/3/