javascript - 在 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 的内容通过 ajax 加载使用命令 $('.fancybox-content').remove()但它不起作用

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');