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

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)

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

add click event on img with data from a json (twitch api)

javascript

ajax

twitch