Question

所以我正在做freeCodeCamp project，显示有关特定拖缆的信息。关于for循环中的if语句，我遇到了多个问题（我认为）。

首先，每个流媒体的状态始终为“离线”，其次，徽标周围的边框除第一个外没有变化。如果它工作，我仍然不确定边框颜色是否正确（红色表示离线流，绿色表示在线）。

如果你仔细观察，我所做的是我为每个流传输信息迭代提供了一个特定的id，对于相应的图像提供了1，为状态提供了1，所以我可以在if语句中使用i变量来定位它们。 / p>

这是JS代码，通过Codepen使用我提供的链接更好地可见，主要是因为你看到整个工作，我不知道如何正确格式化代码，这样你就不必使用水平滚动条看到排长队。：/

提前致谢！

$(document).ready(function() {

  var channels = ["freecodecamp", "wudijo", "ThijsHS", "HSdogdog", "Sjow"]; 

  for (var i = 0; i < channels.length; i++) {
       var channelURL = "https://wind-bow.gomix.me/twitch-api/channels/"+ channels[i] +"?callback=?";
       var streamURL = "https://wind-bow.gomix.me/twitch-api/streams/"+ channels[i] +"?callback=?";

   $.getJSON(channelURL, function(data1) {

     var logo = data1.logo;
     var name = data1.display_name;
     var twitchLink = data1.url;
     var status;

   $.getJSON(streamURL, function(data2) {

         if (data2.stream === null) {
           status = "Offline"; 
            }
         else {
           status = data2.stream.channel.status;
            }

    $("#followerInfo").append("<div class = 'row'><div class = 'col-md-4'><a href = '"+ twitchLink +"' target = 'blank'><img id = 'img"+ i +"' src = '"+ logo +"'></a></div><div class = 'col-md-4'><p>" + name + "</p></div><div class = 'col-md-4'><p id = 'status"+ i +"'>" + status + "</p></div></div>");

         if (data2.stream === null) {
           $("#img"+ i +"").addClass('img-offline');
          }
         else {
           $("#img"+ i +"").addClass('img-online');
          }

        });           
     });

 }

});

Answer 1

如果你console.log(channelURL)，你只能看到＆＃34; Sjow＆＃34;他的数据正在被调用。发生这种情况是因为在完成任何请求之前循环结束，因此只使用数组中的最后一个值（Sjow）。

您可以按照this answer修复此问题。

FCC Twitch API项目：for循环中的if-else不会遍历所有可能性

1 个答案: