Question

再次，我。我已经设法在没有帮助的情况下完成了这个项目（非常好），但是我现在需要一些帮助。我正在尝试设计一个选项卡式菜单，将我的API调用结果过滤到：显示所有用户，仅在线显示用户并仅脱机显示用户。请帮忙。

请参阅下面的代码：

    <body class="container-fluid">
  <div class="container-fluid center" id="title">
    <h1 class="text-center">My Twitch.TV Favorites List</h1>
    <div class="text-center" id="mainLink"></div>
  </div>
  <div class="container">Filter: 
    <ul class="nav nav-tabs">
      <li class="active"><a href="#userDisplay">All</a></li>
      <li id="menuOnline"><a href="#userDisplay">Online</a></li>
      <li id="menuOffline"><a href="#userDisplay">Offline</a></li>
    </ul>
  </div>
  <div class="container-fluid center" id="userDisplay">
    <div class="container col-md-1" id="logo"></div>
    <div class="container col-md-2" id="name"></div>
    <div class="container col-md-8" id="activity"></div>
    <div class="container col-md-1" id="status"></div>    
  </div>
</body>

...和我的JQuery：

$(document).ready(function() {
  var userArr = [
    "ESL_SC2",
    "OgamingSC2",
    "cretetion",
    "freecodecamp",
    "habathcx",
    "RobotCaleb",
    "noobs2ninjas",
    "Blackbat023",
    "thewildfirecommunity"
  ];

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


    $.getJSON(channelsData, function(users) {
      //console.log(users);
      $("#userDisplay").append(function(){
      $("#logo").append("<img src=" +users.logo +' class="img-resonsive img-thumbnail" alt="Logo" />');
      $("#name").append('<h4>' +users.name +"</h4> (" +users.updated_at +")<br><br>");
      $("#activity").append('Acitvity: <h4>'+users.status +"</h4><br>");
      });
    });

    $.getJSON(streamsData, function(streams) {
      //console.log(streams);
      var streamData = streams.stream;
      if (streamData === null) {
        $("#status").append('<img src="http://i.imgur.com/vz0GuT9.png" class="img-responsive img-thumbnail" alt="Offline" />'
        );
      } else {
        $("#status").append('<img src="http://i.imgur.com/4jbBgtn.png" class="img-responsive img-thumbnail" alt="Online" />'
        );
      }

      $(".active").onClick(function(){
        window.reload;
      });
      $("#menuOnline").onClick(function(){
        var statArr = $.grep(userArr, function(element, index){
          return(streamData != null);
        });
      });
      $("#menuOffline").onClick(function(){
        var statArr = $.grep(userArr, function(element, index){
          return(streamData == null);
        });
      });
    });
  }

  $.getJSON('https://wind-bow.gomix.me/twitch-api/streams/freecodecamp?callback=?', function(fccData){
    //console.log(fccData);
    if(fccData.stream === null){
      $("#mainLink").append('<h2><a href="https://www.twitch.tv/freecodecamp" target="blank">We are currently offline</a></h2>');
    } else {
      $("#mainLink").append('<h2><a href="https://www.twitch.tv/freecodecamp" target="blank">Please join us on Twitch.TV</a></h2>');
    }
  });


});

Answer 1

当您为用户创建HTML时，请为他们提供一个表格，指明他们是在线还是离线。

  if (streamData === null) {
    $("#status").append('<img src="http://i.imgur.com/vz0GuT9.png" class="img-responsive img-thumbnail user-offline" alt="Offline" />'
    );
  } else {
    $("#status").append('<img src="http://i.imgur.com/4jbBgtn.png" class="img-responsive img-thumbnail user-online" alt="Online" />'
    );
  }

然后，您可以使用这些类来隐藏或显示适当的用户：

$("#menuOnline").click(function() {
    $("#status .user-online").show();
    $("#status .user-offline").hide();
});
$("#menuOffline").click(function() {
    $("#status .user-offline").show();
    $("#status .user-online").hide();
});

这些点击处理程序应位于$(document).ready()函数的顶层，而不是for循环内部。

如何过滤我的api结果，仅显示在线或离线的用户？

1 个答案: