在img上添加带有json(twitchapi)数据的点击事件

Question

我遇到的问题是，在创建了一个包含来自特定流预览的图像的列表后，我希望能够点击这些图像，并将播放的流替换为来自该图像的流。

在下面的代码中，我得到了播放GTA V和执行GTA RP的流媒体。有了这些信息，我获得了玩家的昵称，可以创建带有流媒体预览图像的url。

function streamData(auth){
$.ajax({
type: 'GET',
url: 'https://api.twitch.tv/helix/search/channels? 
query=FailyV&live_only=true', /** gta V id = 32982 */

dataType:'json',
headers: {
"Client-ID": 'id',
"Authorization": "Bearer "+auth
},
success: function(streamList) { 

for (let i = 0; i < streamList['data'].length; i++){
if(streamList['data'][i]['game_id'] == 32982){
gtaList.push(streamList['data'][i]['display_name'])                                                                                             
$('#twitch-embed-low').append('<img id="thumbnail'+i+' " src="https://static-cdn.jtvnw.net/previews-ttv/live_user_'+streamList['data'][i]['display_name']+'-300x200.jpg">')
.on("click", function(e){
console.log(gtaList[i])
})
}
}
new Twitch.Embed("twitch-embed-main", {
width: '80%',
height: '80%',
channel: gtaList[0],
autoplay: false,
layout: "video",
// only needed if your site is also embedded on embed.example.com and othersite.example.com 
parent: ["embed.example.com", "othersite.example.com"]
});  

let test = $('#twitch-embed-low')
console.log(test[0])
},
error: function(data){
info = document.getElementById("info")
info.innerHTML = "ERROR: " + data["responseJSON"]["message"] + ". Make sure your CID and corresponding secret are set in the JavaScript."
} 
})
}

正如你所看到的，我已经测试了这个

$('#twitch-embed-low')
.append('<img id="thumbnail'+i+' " src="https://static-cdn.jtvnw.net/previews- 
ttv/live_user_'+streamList['data'][i]['display_name']+'-300x200.jpg">')
.on("click", function(e){console.log(gtaList[i])})

但正如你所能想象的，它不起作用(正如我所怀疑的那样(，每次我点击一张图片，它都会完成一个完整的循环，所以它不会把正确的流放在阅读中，而是系统地放在最后一个流中。

所以这个想法是，当你点击图片时，它会在阅读中产生正确的流，但我不知道如何做到这一点。

Answer 1

您可以进行一些改进。第一个是将单击处理程序绑定到父元素，而不是img元素，这意味着它将被调用(n)次(streamList['data']的长度(。这是因为您多次将单击处理程序绑定到同一个html元素。您希望将此事件处理程序仅绑定到img元素。

其次，当调用事件处理程序时，它将引用i的值，该值将始终是循环迭代中i的最后一个值。如果要在创建img元素时记录i的值，则需要使用闭包来保存i的状态，例如：

var img = $('<img id="thumbnail'+i+' " src="https://static-cdn.jtvnw.net/previews- 
ttv/live_user_'+streamList['data'][i]['display_name']+'-300x200.jpg">')
.on("click", (function (index) {
return function (e) {
console.log(gtaList[index]);
};
})(i));
$('#twitch-embed-low').append(img)