单击带有循环的 .append 中的 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>');
}
})

基于 K K 的解 [用 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
});