Question

我在我的网页上使用gridster小部件。每个小部件都有多个图像和textarea.textarea包含由逗号分隔的图像链接.textarea的初始内容是从JSON实现的。图像可以从我希望在从网格中删除图像时更新文本区域的内容。（如果我从文本区域删除并映像该图像的链接应该消失）。截至目前，我正在获取静态内容textarea。

我的JS删除图像并尝试删除textarea的内容

$('.removediv').on('click', function () {
    var textArea = $(this).parent().next();
    var text   = textArea.val();
  var imgSrc = $(this).prev().attr("src");
  textArea.val(text.replace(imgSrc, ""));

$(this).closest('div.imagewrap').remove();


});

但是上面的代码不能使textarea动态化。它只在只有一个图像的情况下才有效。

我的生成小部件的功能

for(var index=0;index<json.length;index++) {
    var images = json[index].html.split(',');
        var imageOutput = "";

        for(var j = 0; j < images.length; j++) {
        imageOutput += '<div class="imagewrap"><img src='+ images[j] +'> <input type="button" class="removediv" value="X" /></div></div>';
        }

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

Fiddle将正确说明。如果你继续删除图像，文字内容保持不变。我希望它改变。

Answer 1

您应该将“序列化”代码放在函数中，并在删除元素时调用该函数：

$('.removediv').on('click', function() {
    var textArea = $(this).parent().next();
    var text = textArea.val();
    var imgSrc = $(this).prev().attr("src");
    textArea.val(text.replace(imgSrc, ""));
    $(this).closest('div.imagewrap').remove();
    serialize();
});

$('.js-seralize').on('click', function() {
    serialize();
});

function serialize(){
    var s = gridster.serialize();
    $('.gridster ul li').each((idx, el) => { // grab the grid elements
        s[idx].html = $('textarea', el).html(); // add the html key/values

        json_variable = JSON.stringify(s)
    });
    $('#log').val(json_variable);
}

Fiddle

使用jquery / javascript更改textarea的内容

1 个答案: