Javascript 单击.append中的一个div并添加一个循环

我使用.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>');

      }
 })

---

因此，我找到了一种不同的方法，通过使用数组中的find将这两个数据组合在一起。有更好的方法吗？如果是这样，原因是什么，区别是什么？

您可以向dynamic添加

数据id

，例如：

尝试类似的方法：

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

var-gamesData//保存Ajax响应的全局变量。
$.ajax({
键入：“Get”，
url:“http://URL/“+玩家，
成功：功能（数据）{
gamesData=数据；
var dynamic=“”；
对于（i=0；i

注意：这里的方法是将ajax响应存储在变量中。从代码中，响应是一个数组。因此，当您迭代项目时，以任何您喜欢的方式获取单击项目的索引，并使用gamesData中的索引访问游戏的详细信息。
为什么不将
数据id
属性添加到
中，然后单击将
此
传递给它，然后您可以使用
$（this.data（'id'））
它对我也不起作用…@El Alami Anas，这只会给我id，我需要获得完整的数据集。它是接受id参数后的URL吗？如果是这样，您可以逐项执行另一个ajax调用。e、 g.
url:“http://“url/”+GamesList+“/”+gameID
将从
AJAX
请求接收的数据存储在一个全局变量中，而不是将数据传递给函数，将数据的id作为
GameDetails（'+data[i].id_game+'）传递
。然后使用Id访问函数中的数据。我刚刚更改了最后一部分，我需要获取所有数据，而不仅仅是Id:）如果它不起作用，我将能够使用您的建议并发出另一个api请求以获取该游戏的详细信息。例如，您可以设置全局对象游戏，然后在for循环集游戏中[data[Id'].id]=data[i]那么你只需要得到idHi K就可以得到数据集，到目前为止，我已经介绍了你的解决方案，但是直到最后一部分，一切都正常，我在游戏中得到了游戏数据，我在元素中得到了id，但我似乎无法得到两者之间的联系。它给出了“未定义”。这是我从元素中得到的信息：init[div#1371.TopContainerCel，context:div#1371.TopContainerCel]0:div#1371.TopContainerCel context:div#1371.TopContainerCel Length 1i用您的回答更新了我的问题并添加了数组。查找原因我无法让最后一部分以其他方式工作
$("#GameContainer").on('click','.TopContainerCel',function() {
  var $this = $(this);

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

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