Question

我目前有一个Twitch TV网络应用程序，其UI界面的设计方式使我希望大蓝屏成为所有在线和离线信息附加到＆＃34; all＆＃34的地方;按钮，只有在线＆＃34;在线＆＃34;按下按钮，当＆＃34;离线＆＃34;时，仅附加离线信息。按下按钮。目前，信息被附加到错误的div。我该如何解决这个问题？

这是我的代码：https://codepen.io/IDCoder/pen/mXMqGV?editors=0010

这是我的javascript代码：

//with help from places..... https://stackoverflow.com/questions/48859596/error-call-for-get-json-function-within-for-loop/48859987#48859987, etc, etc....
$(document).ready(function(){

//GET TWITCH TV STREAMERS' STATUS AND API CALL

var twitchTvStreamers=["FreeCodeCamp", "ESL_SC2", "OgamingSC2", "cretetion", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];

//OUT OF ALL THE TWITCH TV STREAMERS IN A TWITCH TV ARRAY FIND THOSE 8 STREAMERS LISTED
for(channel of twitchTvStreamers){
    getChannelInfo(channel);

    }
});
var getChannelInfo = channel => { 
    $.getJSON('https://wind-bow.glitch.me/twitch-api/streams/' + channel)
    .done(function(info) {
        if (info.stream === null) appendInfo(channel,'offline');
        else appendInfo(channel,'online');
    });
}
var appendInfo = (channel,target) => {
    $.getJSON('https://wind-bow.glitch.me/twitch-api/channels/' + channel)
        .done( function(ch){
            channelID = ch.display_name;
            channelLogo = ch.logo;
            channelUrl = ch.url;
            streamContent = ch.content;
            $('#'+target).append('<div class="TV-screen">'+channel+' is '+target);
        });    
}

这是我的HTML代码：

<html> 

<head>


<title>

</title>

</head> 
<body>

<div class="container">

    <div class="Twitch-TV">
    <h1>Twitch TV Web App</h1>
    </div>
    <div class="share">
      <ul class="soc">
          <li class="declaration">
          SHARE
          </li>
          <li class="socbutton">
            <a href="https://www.linkedin.com" target="blank"><i class= "fa fa-linkedin-square fa-fw"></i>LINKEDIN</a>
          </li>
          <li class="socbutton">
            <a href="https://github.com" target="blank"><i class= "fa fa-github fa-fw"></i>GITHUB</a>
          </li>
          <li class="socbutton">
            <a href="https://www.facebook.com" target="blank"><i class= "fa fa-facebook-official fa-fw"></i>FACEBOOK</a>
          </li>
          <li class="socbutton">
            <a href="https://www.freecodecamp.com" target="blank"><i class= "fa fa-fire fa-fw"></i>FREECODECAMP</a>
          </li>
        </ul>
    </div>

    <div class="TV-screen"> 
    </div>

    <div class="user-status">
    <button id ="online" type="button" class="online-status" >Online</button>
    <button id ="offline" type="button" class="offline-status" >Offline</button>
    <button id ="all" type="button" class="online-and-offline" >All</button>
    </div>

    <div class="input">
        <input type="text" id="searchTerm" placeholder="search streams....">        
    </div>
</div>



</body> 
</html>

感谢您的帮助！

Answer 1

Js

var twitchTvStreamers;
var loaded = false;
//with help from places..... https://stackoverflow.com/questions/48859596/error-call-for-get-json-function-within-for-loop/48859987#48859987, etc, etc....
$(document).ready(function(){

//GET TWITCH TV STREAMERS' STATUS AND API CALL

twitchTvStreamers=["FreeCodeCamp", "ESL_SC2", "OgamingSC2", "cretetion", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];

//OUT OF ALL THE TWITCH TV STREAMERS IN A TWITCH TV ARRAY FIND THOSE 8 STREAMERS LISTED

});

//filter online offline and all
var filterchannel = filterch => { 
  if(!loaded)
  {
    for(channel of twitchTvStreamers){
      getChannelInfo(channel, filterch);
    }
  }
  else
    {
      setTimeout(function(){ 
        $('.TV-screen div').each(function(idx, item) {
          if($(item).hasClass(filterch))
            {
              $(item).show();
            }
          else
            {
              $(item).hide();
            }
        });
      }, 100);
    }
};

$('button').click(function(e) {
 filterchannel(e.target.id);
})

var getChannelInfo = (channel, filterch) => { 
    loaded = true;
    $.getJSON('https://wind-bow.glitch.me/twitch-api/streams/' + channel)
    .done(function(info) {
        console.log(channel);
        if (info.stream === null) {
          appendInfo(channel,'offline',filterch);
        }
        else {
          appendInfo(channel,'online', filterch);
        }

    });
}
var appendInfo = (channel,target, filterch) => {
    $.getJSON('https://wind-bow.glitch.me/twitch-api/channels/' + channel)
        .done( function(ch){
            channelID = ch.display_name;
            channelLogo = ch.logo;
            channelUrl = ch.url;
            streamContent = ch.content;
            $('.TV-screen').append('<div class="' + target + ' all">'+channel+' is '+target);
            if(twitchTvStreamers[twitchTvStreamers.length - 1] === channel) {
              filterchannel(filterch);
            }
        });    
}

codepen：https://codepen.io/YasirKamdar/pen/EQQXBw

在按下按钮时将信息附加到Div

1 个答案: