问使用jQuery在引导网格中动态添加/删除元素
EN

Stack Overflow用户

提问于 2020-04-12 16:21:09

回答 1查看 331关注 0票数 0

我正在编写一个图片库，使用引导网格来显示所有的图像。用户可以使用模式form...and上传新图像，可以使用每个网格元素中的按钮删除每个显示的图片。

下面的jquery函数将画廊绘制到带有弹出画廊类的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
            });
        }
    }
});

但是我遇到了麻烦，因为我想在元素被removed....right后重新排序网格，如果我删除第一张图像，那个空间仍然是空的。有什么解决这个问题的提示吗？

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

非常感谢你的帮助。

jquery

twitter-bootstrap

grid

回答 1

Stack Overflow用户

发布于 2020-04-13 02:56:51

问题是你把图片写到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();