試圖根據點擊ID調用功能

Question

我正在使用Unsplash API來查找和下載照片。

就像一個模型，我有這個隨機的照片按鈕，找到一張照片，並完美地下載它。 下載通過在AJAX調用上創建鏈接元素，然後在按鈕ID單擊事件中調用該鏈接元素來工作。代碼如下：

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(); 
}) 

現在，我創建了這個搜索欄，它根據搜索詞搜索10張照片。然後它一次顯示全部10張照片。

我創建了一個單獨的按鈕ID爲每個按鈕單擊。我通過控制檯記錄click事件上的按鈕ID證明了這一點。

但是，我無法通過點擊按鈕ID調用link.click（）函數。點擊時，它會下載照片陣列中的最後一張照片。

如何爲特定的照片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-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(); 
}