Question

我有一个图像编辑器，可以生成渲染的最终图像。每张图片下方都应有一个删除按钮。问题是每个后续图像都有一个额外的“删除”按钮。所以第一张图片有一张，第二张有两张，依此类推。这是我必须向图像添加按钮的代码：

renderButton.click(function (event) {
var dataUrl;

dataUrl = imgly.renderToDataURL("png", { minSize: "300x300"}, function (err, dataUrl) {

$("<img>").attr({
    src: dataUrl
  }).appendTo($(".result"));
  console.log(dataUrl);
});

$('img').each(function () {
    var $button = $('<button class="btn btn-default">')
        .text('Remove')
        .on('click', function () {
            $(this).prev('img').remove();
            $(this).remove();

            return false;
        });

    $button.insertAfter($(this));
});

如何让每张图片只附加一个按钮？

问题在于它设置为将按钮应用于每个图像，这意味着即使之前的图像也会收到另一个按钮。如何将每个功能仅应用于列表中的图像？

Answer 1

很不确定，但看起来你应该这样做：

renderButton.click(function (event) {
var dataUrl;

dataUrl = imgly.renderToDataURL("png", { minSize: "300x300"}, function (err, dataUrl) {

$("<img>").attr({
src: dataUrl
 }).appendTo($(".result"));
 console.log(dataUrl);
});

$(".result img").each(function () {
var $button = $('<button class="btn btn-default">')
    .text('Remove')
    .on('click', function () {
        $(this).prev('img').remove();
        $(this).remove();

        return false;
    });

$button.insertAfter($(this));
});

Answer 2

我没有对此进行测试，但我会检查图像是否已经附加了一个按钮。此外，由于所有图像的按钮始终相同，因此您可以在循环外声明该变量。我注意到你还把图像附加到按钮而不是圆形（我认为这是你正在寻找的）

renderButton.click(function (event) {

    var dataUrl;

    dataUrl = imgly.renderToDataURL("png", { minSize: "300x300"}, function (err, dataUrl) {

            $("<img>").attr({ src: dataUrl}).appendTo($(".result"));
              console.log(dataUrl);
    });

    var $button = $('<button class="btn btn-default">')
            .text('Remove')
            .on('click', function () {
                $(this).prev('img').remove();
                $(this).remove();

                return false;
            });

    $('img').each(function () {        

        if ($(this).next('.btn').length == 0) {
            $(this).insertAfter($button);  
        }    

    });

添加到生成的图像的附加删除按钮

2 个答案: