Question

我有一个图像投放框，我可以在其中添加图像对于每个图像，我可以单击X以删除动态添加的项目。这很好。

在我的列表上方，我有一个Remove all按钮。当我重新加载页面时使用它。但如果我在添加图像后单击此项，我的功能无法找到这些项目。所以我的问题是，如何删除所有动态添加的图像？

在这里我们的功能：

Gallery = {
  MngGallery: null,
  init: function(){
    var self        = this;
    self.MngGallery     = $('.manage-gallery');

    self.MngGallery.on('click', '.remove-all-images', function(e){
      var imgIDs = [];
      var id = null;

        $('.gallery li').each(function(){
            id = $(this).data('image-id');
            imgIDs.push(id);
            cl(id); // <- this is undefined unless I reload the page
        });

        self.removeImage(null, imgIDs);
    });
  });


  // Dynamically adding images
  addGalleryImage: function(response) {
    var li = $('<li/>').attr({'class': 'image fade'});

    $('<a/>').attr({
        'data-lightbox' : 'gallery',
        'src': response.url
    }).append(
        $('<img/>').attr({
            'data-image-id' : response.imageId,
            'src' : response.url,
            'data-url-large' : response.url,
            'alt' : ''
    })).appendTo(li);

    $(li).appendTo($('.gallery'));

};

Answer 1

在动态代码中，data-image-id会添加到img元素，而不会添加到li元素。但是读取该值的循环正试图从li所以

中读取值

var li = $('<li/>').attr({'class': 'image fade', 'data-image-id': response.imageId});

Answer 2

您使用.attr() - 功能为您的图片指定data-image-id。但是在您的移除功能中，您可以使用.data() - 元素上的li来访问此属性。

尝试使用以下内容：

$('.gallery li img').each(function(){
    id = $(this).attr('data-image-id');
    imgIDs.push(id);
    cl(id);
});

请检查你的选择器，我不能在这里给出100％正确的建议，因为我不知道html标记。

Answer 3

这个：

id = $(this).data('image-id');

应更改为：

id = $(this).find('image').data('image-id');

您正试图从li获取数据图片ID而不是image中的li。

无法删除多个动态添加的列表元素

3 个答案: