Wie wähle ich jeden Loop ID?

Question

Ich mache diese App, die Fotos von der Unsplash API herunterladen kann.

Um dies zu tun, muss ich eine Klick-Funktion erstellen, die die ID der Schaltfläche wählt, und ruft dann den JSON Download-Link.

Das funktioniert gut, aber jetzt lade ich eine Reihe von Unsplash IMG mit einem Suchbegriff, Zuordnung über jede Antwort in der JSON API und setzen sie in Bootstrap-Karten. Ich habe bereits eine Möglichkeit gefunden, eine neue ID für jede IMG-Antwort zu erstellen, aber jetzt muss ich in der Lage sein, auf die Download-Schaltfläche jedes Fotos zu klicken und dieses SPECIFIC ITEM NUR herunterzuladen.

Ich habe versucht, dies mit einer Klasse zu tun, aber dies gibt nicht die Möglichkeit, ein bestimmtes einzigartiges Foto herunterladen. Hier

ist der dokumentierte Code:

// 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

Verwendung class attribute vereinfachen die multiple function einem sonst müssen Sie Funktion für each id klicken.

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

Da das Markup dynamisch erzeugte immer dann müssen Sie das Ereignis zum nächsten statisch Eltern delegieren:

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

_{HINWEIS: Es gibt einige doppelte IDs. Ids sollten einzigartig sein.}