單擊.div中的div附加循環

Question

我正在使用.append填充div-id，並且一切正常，我什至在其中添加了循環，但是我想使項目在循環內可點擊並加載包含該項目詳細信息的div。 這就是我到目前為止所得到的。

<div id="GameContainer"></div>

var gamesData; //A global variable to hold Ajax response.

$.ajax({
     type: 'Get',
     url: "http://"URL/" + GamesList,
     success: function (data) {

       gamesData = data; // add the Ajax data to the global variable

       var dynamic = "";

       for (i = 0; i < data.length; i++) {

       dynamic += '<div id="' + data[i].id_game + '" class="TopContainerCel" onclick="GameDetails(' + data[i] + ')">'
               + '    <div class="TopContainerCelBackground">'
               + '          <img class="TopContainerCelImage" src="' + data[i].CoverImage + '" />'
               + '       </div>'
               + '    <div class="TopContainerCelName">' + data[i].Name + '</div>'
               + ' </div>'
             };

        $('#GameContainer').append(''
             + '<div class="TopContainerScroll">'
             + dynamic
             + '</div>');

      }
 })

//基於KK的解決方案[以array.find擴展]

    added the global variable gamesData and filled it with the Ajax reponse

    $(document).on("click", ".TopContainerCel", function () {
        var elem = $(this);

        console.log(elem[0].id) // the actual id clicked is there
        console.log(gamesData) // all the data of the Ajax response is there

        GameID = elem[0].id;

        var gameData = gamesData[elem.data("id")]; // part that does not work
        var gameData = gamesData.find(x => x.id_game == GameID); // works!

       //gameData has the data
        console.log(gameData)

    });

因此，我找到了一種通過使用數組中的查找將兩種數據組合在一起的不同方法。 有更好的方法嗎？ 如果是這樣，為什么和有什么區別？

Answer 1

試試類似的東西：

  var gamesData;//A global variable to hold Ajax response.
  $.ajax({
       type: 'Get',
       url: "http://URL/" + GamesList,
       success: function (data) {
       gamesData = data;

         var dynamic = "";

         for (i = 0; i < data.length; i++) {

         dynamic += '<div id="' + data[i].id_game + '" data-id="'+data[id]+'" class="TopContainerCel">'
                 + '    <div class="TopContainerCelBackground">'
                 + '          <img class="TopContainerCelImage" src="' + data[i].CoverImage + '" />'
                 + '       </div>'
                 + '    <div class="TopContainerCelName">' + data[i].Name + '</div>'
                 + ' </div>'
               };

          $('#GameContainer').append(''
               + '<div class="TopContainerScroll">'
               + dynamic
               + '</div>');

        }
   })
  $(document).on("click",".TopContainerCel",function(){
    var elem = $(this);
    var gameData = gamesData[elem.data("id")];
    //gameData has your data
  });

注意：這里的方法是將ajax響應存儲在變量中。 從您的代碼中，響應是一個數組。 因此，當您遍歷項目時，可以按自己喜歡的任何方式獲取被單擊項目的索引，並使用來自gamesData的索引訪問游戲的詳細信息。

Answer 2

您可以將data-id添加到動態對象中，例如： <div data-id="'+data[i].id+'" 。
那么你可以做：

var games = {};

for (i = 0; i < data.length; i++) {
       games[data[i].id_game] = data[i];
       dynamic += '<div id="' + data[i].id_game + '" class="TopContainerCel" onclick="GameDetails(' + data[i] + ')">'
               + '    <div class="TopContainerCelBackground">'
               + '          <img class="TopContainerCelImage" src="' + data[i].CoverImage + '" />'
               + '       </div>'
               + '    <div class="TopContainerCelName">' + data[i].Name + '</div>'
               + ' </div>'
};

$("#GameContainer").on('click','.TopContainerCel',function() {
  var $this = $(this);

  console.log(games[$this.data('id')])
  // code logic here
});