单击.div中的div附加循环

Question

I am using an .append to populate a div-id and all that works fine, i even get the loop inside, however i would like to make an item clickable inside the loop and load a div that holds details of that item. This is what i got so far.

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

      }
 })

// based on the solution of KK [extended with an 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)

    });

So i found a diffent way of combining the two data together by using a find in the array. Is there a better way of doing this? If so why and what is the difference?

Answer 1

Try something similar to this:

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

Note: The approach here is to store ajax response in a variable. From your code, the response is an array. So, when you iterate over the items, get the index of the clicked item in any way you prefer and access the detail of game using the index from gamesData.

Answer 2

you can add data-id to dynamic like : <div data-id="'+data[i].id+'" .
then you can do :

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