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

【问题标题】：How to select each loop generated ID?如何选择每个循环生成的 ID？
【发布时间】：2017-10-30 10:14:27
【问题描述】：

我正在制作这个可以从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();
    });

  });
});

【问题讨论】：

使用类属性。所以它会 $('.common_class').click(function () { current_clicked_id = $(this).attr('id'); link.click(); });

标签： javascript jquery json twitter-bootstrap

【解决方案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(); 
});

【讨论】：

天才。谢谢！
很高兴帮助你@Temple

【解决方案2】：

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

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

_{注意：有一些重复的 id。 ID 必须是唯一的。}

【讨论】：

所有ID都会重复，这就是这个问题的重点哈哈。