APIのIDを変数に格納する方法は、オンクリックで情報を見つけるために使用できますか？

Question

オンクリック機能では、APIのアルバム画像が表示されます。アルバムの画像をクリックすると、画像にオーバーレイがあります。

アルバムに関する他の情報をオーバーレイに添付しようとしています。 1つの特定のアルバムからの情報だけが表示されるように、変数にアルバムIDを格納することは可能ですか？この関数内のすべてのIDを変数として取得できますが、個々の変数として各変数を格納する方法を、オンクリック関数で使用する方法を考えることはできません。どんな提案も感謝しています。

 function displayAlbums(data) { 

        var html = '<ul>'; 
        $.each(data.tracks, function(i, eachAlbum) { 
        html += '<li class="albumImage">'; 
        html += '<img src="' + eachAlbum.album.images[0].url + 
        '">'; 
        html += '</li>'; 

        var id = eachAlbum.album.id; 
         console.log(id); // all albums id's are showing 
         in console 

        }); // closes each 
        html += '</ul>'; 

         $("#albumImages").html(html); 

        } //closes displayAlbums function 

Answer 1

Storeは、各<img>または<li>

html += '<img data-album_id="' +eachAlbum.album.id +'" src="' + eachAlbum.album.images[0].url + '">'; 

上のデータ属性として次にクリックハンドラを使用すると、データとしてのIDを追加することができ

$("#albumImages").on('click', '.albumImage img', function(){ 
    console.log('album id=', $(this).data('album_id')); 
}) 

Answer 2

要素自体から直接アクセスすることができます-id属性であるため、次のようになります。

html += '<img src="' + eachAlbum.album.images[0].url + '" data-id="' + eachAlbum.album.id + '">'; 

Answer 3

あなたの$.each内で理にかなっている方、imgまたはliにdata-id属性を使用してこのように、onclickリスナーでそれらにアクセスすることができます。ここで使用されるように、using data attributes(MDN)template literals上

より上

function displayAlbums(data) { 

    var html = '<ul>'; 
    $.each(data.tracks, function(i, eachAlbum) { 
     html += '<li class="albumImage">'; 
     html += `<img src="${eachAlbum.album.images[0].url}" data-id="${eachAlbum.album.id}">`; 
     html += '</li>'; 

     var id = eachAlbum.album.id; 
     console.log(id); // all albums id's are showing in console 

    }); // closes each 
    html += '</ul>'; 

    $("#albumImages").html(html); 

} 

詳細

html += `<img src="${.....`