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

问题描述

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

在下面的代码中，我得到了玩 GTA V 和做 GTA RP 的飘带。有了这些信息，我就获得了玩家的昵称，以创建带有他们流的预览图像的网址。

...

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

...

但是正如你想象的那样，它不起作用（正如我怀疑的那样），每次我点击一个图像时，它都会进行完整的循环，因此它不会将正确的流放入阅读中，而是系统地放入最后一个我不是在谈论灾难性的表演，因为它逐一加载每个流。

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

解决方法

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

其次，当事件处理程序被调用时，它将引用 i 的值，该值始终是循环迭代中 i 的最后一个值。如果要在创建 i 元素时记录 img 的值，则需要使用闭包来保存 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)

ajax javascript twitch