使用jQuery在自举网格中动态添加/删除元素

Question

我正在使用自举网格编写图片库以显示所有图像。用户可以使用模态形式上载新图像...并可以使用每个网格元素中的按钮删除每个已替换的图片。

在jquery函数下面，通过popup-gallery类将图库绘制成div

function getPictures(id) {
    $.ajax({
        dataType: 'json',
        type:'GET',
        url: `${controller_url}/collect_pictures/${id}`,
        beforeSend: function(){
            $(".loader").css("visibility", "visible");
        }
    }).done(function(data){ 
        $(".loader").css("visibility", "hidden");
        $('.pictures-buttons').show();
        $( ".popup-gallery" ).empty();
        if(data.pictures.length > 0) {
            for (var i = 0, j = data.pictures.length; i < j; i++){
                if(i==0 || i%4 == 0)
                {
                    var appendEl = $("<div class='row'></div>").appendTo(".popup-gallery");
                }
                $(`
                    <div class="col-lg-6 col-xl-3">
                        <div class="card">
                            <a href="${data.picture_path}${data.pictures[i].image}" data-source="">
                                <div class="img-responsive">
                                    <img src="${data.picture_path}${data.pictures[i].image}" alt="" class="card-img-top img-fluid">
                                </div>
                            </a>
                            <div class="card-body">
                                <h5 class="card-title">Filename: ${data.pictures[i].image}</h5>
                                <p class="card-text">Uploaded: ${data.pictures[i].uploadtime}</p>
                                <p class="card-text">File data: ${data.pictures[i].sizes} / ${data.pictures[i].filesize}</p>
                                <div class="button-list" data-id="${data.pictures[i].imgid}">
                                    <button type="button" class="btn btn-info waves-effect waves-light picture-button"><i class="mdi mdi-spotlight-beam mr-1"></i> Details</button>
                                    <button type="button" class="btn btn-warning waves-effect waves-light picture-button">Remove <i class="mdi mdi-trash-can ml-1"></i></button>
                                </div>
                            </div>
                        </div>
                    </div><!-- end col -->
                `).appendTo(appendEl);
            }
        }
        else
        {
            $( ".alert" ).html( "No pictures for the selected registration." );
        }
    });
}

到目前为止，我可以使用以下代码成功删除每个图片元素：

$("body").on("click",".picture-button",function(e){
    var id = $(this).parents('div').data('id');
    if(id != null) {
        e.preventDefault();
        if($(this).find("i").hasClass("mdi-spotlight-beam")) {
            viewPicture(id);
        }
        if($(this).find("i").hasClass("mdi-trash-can")) {
            removePicture(id);
            $(this).parent().parent().parent().hide({
                duration:500
            });
        }
    }
});

但是我遇到麻烦了，因为我想在删除一个元素后重新排列网格....现在，如果我删除第一个图像，则该空间将保持空白。有解决此问题的提示吗？

与用户上载新图像后在名称上动态添加新元素相同。

非常感谢您的帮助。

Answer 1

问题是您将图片写入html，然后将它们隐藏在那里。因此，您必须添加一个将ajax响应定向到的数组，然后才可以添加/删除图片，然后对视图进行重新排序。

您需要的功能（伪代码）

// modify the items array (push/remove/edit)
 myGallery.items.push({
      src: "some-image.jpg"
  });

 // call update method to refresh counters (if required)
 myGallery.updateItemHTML();