如何使用 jQuery 显示来自 Flickr 的照片标题？

Question

我在我的 HTML 中创建了一个搜索事件处理程序，它接受输入并向 flickr 的 photo.search 发出搜索请求，方法是在“&text=”之后附加值以按文本搜索。 然后会显示 7 张与搜索词相关的照片。 我添加了一个单击事件处理程序，然后将详细信息插入到我的 HTML 文件中，以便在用户单击照片时以模态显示，然后通过将模态 css 设置为显示来显示照片。 当我尝试在图像下显示照片的标题时出现问题。

搜索按钮事件处理程序：

//search button function
function searchButton_handler(){
    let input = $("#textInput").val();
    let htmlStr = "";
    $.get(SEARCH_REQ + "&text=" + input, function(data){

        nrequest = data.photos.photo.length;
        for (let i = 0; i < data.photos.photo.length; i++){
            let photoID = data.photos.photo[i].id;
            let photoTitle = data.photos.photo[i].title;
            let photoObj = {"file": photoID, "title": photoTitle};
            search_photos.push(photoObj);
        
            getSizes(photoObj, photoID, photoTitle);
        }
    });

}

从 flickr 获取尺寸：

//access getSizes array from flickr
function getSizes(photoObj, photoID){
    let getSizeReq = GETSIZES_REQ + photoID;
    $.get(getSizeReq, function(data){
        let photoURL = data.sizes.size[2].source;
        photoObj.full = data.sizes.size[data.sizes.size.length-3].source;
        photoObj.file = photoURL;
        
        display_search(search_photos);
    });
}

显示搜索结果：

//display photos returned from search
function display_search(search_photos){
    let htmlStr = "";
    
    for (let i = 0; i < search_photos.length; i++){
        htmlStr += `<figure data-full="${search_photos[i].full}"><img src="${search_photos[i].file}" alt="${search_photos[i].title}" width="150" height="150"><figcaption>${search_photos[i].title}</figcaption></figure>`;
        
    }
    
    $("#item2").html(htmlStr);
   
    $('figure').each(function(index){
        $(this).click(function(){
            
            $("#modal-container").css("display", "block");
            $("#modal-content").attr("src", $(this).attr("data-full"));
        })
    });
}

有人可以帮助我吗？ 我已经尝试了我能想到的一切，控制台记录它要么返回未定义，要么返回错误。 任何帮助将不胜感激，谢谢！