使用来自 json (twitch api) 的数据在 img 上添加点击事件

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)