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>');
}
})
// 基于 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)
});
所以我找到了一种通过在数组中使用 find 将两个数据组合在一起的不同方法。有没有更好的方法来做到这一点?如果是这样,为什么和有什么区别?
解决方案
尝试类似的事情:
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 中的索引访问游戏的详细信息。
推荐阅读
- python - 类型错误:“功能”缺少一个必需的位置参数:“自我”
- python - 使用 map() 的 multiprocessing.Pool 在大列表输入时表现得非常慢
- html - 特定 div 的 CSS 动画
- java - 在java中将列表的旧值更改为新值
- ios - 如何创建可更新的 CoreML 模型?
- vuetify.js - 如何使用 vee-validate 4 (alpha) 和 Vuetify 进行验证?
- c++ - 在 C++ 中从文件读取并动态分配到 Student 类型的数组中
- javascript - 用 Jest 发出警告
- mapbox - mapbox 表达式通过 id 数组过滤图层的特征属性(特征 id)
- html - 我的链接属性在 html 和 css 工作表之间不起作用