在 fancybox 关闭后删除加载的元素

Question

如何通过 ajax 调用删除加载的数据，以便在我按下另一个图像时加载相关图像？

这是我的加载代码 fancybox:

$(document).ready(function () {
    $("[data-fancybox]").fancybox({
        loop: false,
        closeExisting: true,
        buttons: [
            // "zoom",
            //"share",
            "slideShow",
            // "fullScreen",
            //"download",
            // "thumbs",
            "close"
        ],
        onInit: function (instance) {
            let id_album = $("[data-fancybox]").attr('id');
            $.ajax({
                type: 'POST',
                url: './function/retrive-photo.php',
                data: {
                    id_album: id_album
                },
                dataType: 'json',
                success: function (data) {
                    $.each(data, function (index, item) {
                        instance.addContent({
                            'type': 'image',
                            'src': item.src
                        });
                    });
                }
            });
        },
        afterClose: function () {
            $('.fancybox-content').remove();
            console.log("DONE B!");
        }
    });
});

我尝试使用命令 $('.fancybox-content').remove() 删除通过 ajax 加载的 fancybox 的内容，但它不起作用

Answer 1

改变你的

onInit: function (instance) 
{
    let id_album = $("[data-fancybox]").attr('id');

至：

onInit: function (instance) 
{
    let id_album = $("[data-fancybox]").eq(instance.id-1).attr("id");

因为 $("[data-fancybox]") 是一个数组，你得到的是它的 id，它总是给你第一个。

编辑

变化：

$("[data-fancybox]").fancybox(
{
   XXX
});

至：

$("[data-fancybox]").each(function() 
{
    var that = this;
    $(this).fancybox(
    {
        XXX
    });
});

然后将您的 onInit 代码更改为：

let id_album = $(that).attr('id');

在 fancybox 关闭后删除加载的元素

Remove loaded element after fancybox closing

javascript

jquery

ajax

fancybox-3