Question

我正在制作这个可以从Unsplash API下载照片的应用。

为此，我必须创建一个选择按钮ID的单击功能，然后调用JSON下载链接。

这很好用，但现在我正在加载一堆带有搜索词的Unsplash IMG，映射JSON API中的每个响应并将它们放入Bootstrap卡中。我已经找到了为每个IMG响应创建新ID的方法，但现在我需要能够点击每张照片的下载按钮并仅下载该特定项目。

我尝试用类来代替，但这并不能下载特定的独特照片。

以下是记录在案的代码：

// Search for Photos

$('form').submit(function (e) {
    e.preventDefault();
    // API Calls
    let input = document.getElementById("search").value;
    let $submitButton = $('#submit');
    let searchPhoto = API + 'search/photos?' + client_id + '&page=1&query=' + input;

// Ajax part
$.getJSON(searchPhoto, function (response) {

    // Create beginning of Bootstrap card
    let photoHTML = '<div class="col-12 col-sm-6">'

    // Loop over each response photo, putting it into a unique card
    $.each(response.results, function (i, photo) {
        // Card background
        let photoBackground = photo.urls.regular;
        // Download link
        let download = photo.links.download + "?force=true";
        // Create a link to be clicked by the download button
        link = document.createElement('a');
        link.href = download;
        link.download = 'Download.jpg';   // The file name suggestion for the user.
        document.body.appendChild(link);

        // Add each card element 
        photoHTML += '<article class="card animated fadeInLeft text-center">';
        photoHTML += '<img class="card-img-top img-responsive preview" src=' + photoBackground + '/>';
        photoHTML += '<div class="card-block">';
        photoHTML += '<h4 class="card-title" id="randomTitle"></h4>';
        photoHTML += '<button type="button" class="btn btn-outline-primary dnme" id="div' + i +'">Download</button>'; // Create unique ID
        photoHTML += '</article>';

    })
    // End Card
    photoHTML += '</div>';
    // Put each card into a div
    $('#testing').html(photoHTML);
    // ? Somehow call specific card download id
    $(/* ID here */).click(function () {
        // Call download link
        link.click();
    });

  });
});

Answer 1

使用class attribute将multiple function简化为一个，否则您需要each id的点击功能。

<强> HTML

 photoHTML += '<button type="button" class="common_class btn btn-outline-primary dnme" id="div' + i +'">Download</button>'; // Create unique ID

Jquery：

$(document).on('click','.common_class',function () { 

     currently_clicked_id = $(this).attr('id'); 
     link.click(); 
});

Answer 2

由于标记是动态生成的，因此您需要将事件委托给最近的静态父级：

$('#testing').on('click', '.dnme', function () {
    // Call download link
    link.click();
});

_{注意：有一些重复的ID。 ID应该是唯一的。}

如何选择每个循环生成的ID？

2 个答案: