我正在使用Gridster我有一个带有图像的小部件。有一个 JSON 提供有关每个网格上应该有什么图像的数据(我从 JSON 获取文本,然后从数据库获取相应的图像)。我想要每个网格上都有一个按钮image 将从小部件中删除图像,并从 JSON 中删除相应的值。
我的 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);
};
我的 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
}
];
我的 HTML:
<div class="gridster">
<ul>
</ul>
</div>
Fiddle这就是我想做的事情
fiddle 有一个删除图像的按钮,但它似乎不起作用,删除图像后我想更新/清除相应的键值对以及生成它的 json 对象
任何帮助将非常感激,因为这似乎是 JS/Jquery 的高级主题
最佳答案
试试这个:
$('.removediv').on('click', function () {
$(this).closest('div.imagewrap').remove();
});
在这里测试:JSFiddle
关于javascript - 删除 javascript/jquery 中映射到 json 的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49444322/