Question

I am using the Unsplash API to find and download photos.

Just as a model, I have this random photo button that finds a photo and downloads it perfectly. The download works by creating a link element on the AJAX call and then calling that link element on the button ID click event. Here's the code:

let randomPhoto = API + 'photos/random/?' + client_id;
var link;

$("#newRB").click(function () {
    $.getJSON(randomPhoto, function (response) {
        console.log(response);
        let randomPhoto2 = response.urls.regular;
        // let randomTitle = response.location.title;
        let download = response.links.download + "?force=true";


        document.getElementById('preview').src = randomPhoto2;
        // document.getElementById('randomTitle').innerHTML = randomTitle;


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

    })
});

$("#downloadRB").click(function () {
    link.click();
})

Now, I have created this search bar that searches for 10 photos based off a search term. It then displays all 10 photos at once.

I have created a separate button ID for each button clicked. I proved this by console logging the button ID on the click event.

However, I am unable to call the link.click() function based off the button ID clicked. When clicking, it downloads the last photo in the photo array.

How would I call the specific link() call for that specific photo ID?

Here is the 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-12">';

        // 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 common_class" id="div' + i + '">Download</button>'; // Create unique ID
            photoHTML += '</article>';

        })
        // End Card
        photoHTML += '</div>';
        // Put each card into a div
        $('#testing').html(photoHTML);

        let currently_clicked_id = '';
        let myID = $(document).on('click', '.common_class', function () {
            currently_clicked_id = $(this).attr('id');
        });

        $(myID).click(function () {
            // Call download link
            link.click();
        });
    })
})

Answer 1

尝试

let myID = $("#div" + i);

$(myID).click(function() {
    link.click();
}

Trying to call function based on clicked ID with this

1 个答案: