Javascript 将自定义按钮添加到fancybox

我正在使用下面的代码显示Python程序的结果，并单击fancybox中的view

function myFunction(myArr){

    $("#retrieved_results").empty(); //results keep changing, so everytime there are new results delete old content
    $.each(myArr, function(key, val) {
        var img_url     = folder_name+val;
        var dt          = new Date();
        const url       = new URL(img_url,'http://127.0.0.1:5000/');
        url.search='time= '+dt.getTime();
        img_url         = url.href;
        console.log(key+" "+img_url);
        $("#retrieved_results").append('<a class="fancybox" data-title-id="'+key+'" href="'+img_url+'" data-fancybox="images" >'+'<img id="'+key+'" src="'+img_url+'" width="165" height="165" hspace=5px vspace=5px>'+'</a>');             
    });
}

函数myFunction（myArr）{
$（“#检索的_结果”）.empty（）；//结果不断变化，因此每次出现新结果时都会删除旧内容
$.each（myArr，函数（key，val）{
var img_url=文件夹名称+val；
var dt=新日期（）；
const url=新url（img_url，'http://127.0.0.1:5000/');
url.search='time='+dt.getTime（）；
img_url=url.href；
console.log（key+“”+img_url）；
$（“#检索的#u结果”）。追加（“”）；
});
}

---

我想在fancybox中添加一个额外的按钮，当单击该按钮时，它会将用户重定向到另一个页面，以分析该结果图像。由于fancybox和图像是动态附加的，我不知道如何添加按钮。

您没有指定按钮的位置，因此我假设您需要在工具栏中添加自定义按钮

首先，查看文档中的“如何在工具栏中创建自定义按钮”部分- -基本上，只需使用

btnTpl

选项

---

第二，由于您正在动态创建元素，请查看文档中的“如何使用”部分——基本上，使用

选择器

选项（或修改

默认值

）。

对于其他仍然卡住的人，这就是我在遵循Janis的答案后如何完成操作的原因：

CSS file: 
.fancybox-button--openimg svg path,

JAVASCRIPT file:
    $("#retrieved_results").on("focusin", function(){

        $.fancybox.defaults.btnTpl.openimg= '<button data-fancybox-openimg class="fancybox-button fancybox-button--openimg" title="Open Image" onclick="yourFunction();">' +
        '<svg xmlns="http://www.w3.org/2000/svg" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" width="512px" height="512px">'+

        '<path d="M508.271,194.568l-149.333-128c-3.146-2.708-7.583-3.323-11.396-1.594c-3.781,1.74-6.208,5.521-6.208,9.688v74.813     c-119.188,3.313-176.688,62.312-204.021,112.031c-23.771,43.219-29.104,86.01-30.302,103.573     c-0.229,2.688-0.344,5.427-0.344,8.219v0.031c0,0,0,0.01,0,0.021v0.01c0,0.01,0,0.01,0,0.01v0.031v0.01c0,0,0,0.01,0,0.021v0.01     c0,0.01,0,0.021,0,0.021c0,0.01,0,0.01,0,0.01v0.031c0,0.01,0,0.021,0,0.031c0,0,0,0.01,0,0.031v0.01v0.021v0.01     c0,0.01,0,0.021,0,0.031l0.01,0.031c0,0,0,0,0,0.01c0,0.021,0,0.031,0,0.031c0,0.01,0,0.021,0,0.031v0.031v0.031v0.01v0.031     c0,0.01,0,0.021,0,0.031c0,0,0,0.021,0.01,0.031c0,0,0,0.01,0,0.031v0.01c0,0.01,0,0.021,0,0.031v0.031c0,0.01,0,0.021,0,0.031     c-0.01,0.031,0.021,0.042,0.01,0.042v0.031c0,0.01,0,0.021,0,0.031v0.031c0,0.021,0.01,0.042,0.01,0.042v0.031     c0,0.01,0,0.021,0,0.031v0.01v0.021v0.01l0.01,0.021v0.01c0,0.01,0,0.021,0,0.021c0,0.01,0,0.01,0,0.01v0.031v0.01     c0.01,0.01,0.01,0.01,0.01,0.021c0,0,0,0.01,0,0.021v0.01c0,0.01,0,0.01,0,0.01v0.021c0.      01,0.031,0.01,0.031,0.01,0.031     c0,0.01,0,0.021,0,0.031v0.01v0.021v0.01c0.01,0.01,0.01,0.021,0.01,0.021c0,0.021,0,0.031,0,0.031     c0.667,5.26,5.156,9.323,10.583,9.323c5.885,0,10.656-4.76,10.667-10.646v-0.01c0-0.542,0.01-1.865,0.104-3.885     c4.656-88.698,168.521-108.823,213.229-112.667v73.875c0,4.167,2.427,7.948,6.208,9.688c3.802,1.729,8.229,1.125,11.396-1.594     l149.333-128c2.365-2.021,3.729-4.979,3.729-8.094C512,199.547,510.635,196.589,508.271,194.568z M362.667,307.474v-62.146     c0-2.917-1.188-5.698-3.302-7.708c-1.979-1.906-4.625-2.958-7.365-2.958c-0.156,0-0.323,0-0.49,0.01     c-7.51,0.344-142.177,7.281-208.521,64.323c21.948-57.885,75.969-128.333,208.958-128.333H352c2.833,0,5.542-1.125,7.542-3.125     s3.125-4.708,3.125-7.542V97.849l122.281,104.812L362.667,307.474z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>'+
        '<path d="M437.333,303.047c-5.896,0-10.667,4.771-10.667,10.667v91.615c0,11.76-9.573,21.333-21.333,21.333H42.667     c-11.76,0-21.333-9.573-21.333-21.333V191.995c0-11.76,9.573-21.333,21.333-21.333h147.729c5.896,0,10.667-4.771,10.667-10.667     s-4.771-10.667-10.667-10.667H42.667C19.135,149.329,0,168.464,0,191.995v213.333c0,23.531,19.135,42.667,42.667,42.667h362.667     c23.531,0,42.667-19.135,42.667-42.667v-91.615C448,307.818,443.229,303.047,437.333,303.047z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>'+  
//you can add svg path of the icon you want to show
        '</svg>'+'</button>';
        $("a.fancybox").fancybox({
         // fancybox API options here
         buttons : [ 'zoom','slideShow','thumbs','openimg','close']
         }); 
         }); 

});

CSS文件：
.fancybox按钮——openimg svg路径，
JAVASCRIPT文件：
$（“#检索到的_结果”）。在（“focusin”，function（）上{
$.fancybox.defaults.btnTpl.openimg=''+
''+
''+
''+  
//您可以添加要显示的图标的svg路径
''+'';
$（“a.fancybox”）。fancybox({
//fancybox API选项在这里
按钮：['zoom'、'slideShow'、'thumbs'、'openimg'、'close']
}); 
}); 
});