如何将api结果筛选为只显示在线或脱机的用户？
如何将api结果筛选为只显示在线或脱机的用户？
提问于 2017-07-06 22:09:20
我又来了。我已经设法完成了这个项目，没有帮助(相当高兴)，但唉，我现在需要一些帮助。我正在设计一个选项卡菜单，它过滤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>...and我的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>');
}
});
});回答 1
Stack Overflow用户
回答已采纳
发布于 2017-07-06 22:20:36
当您为用户创建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循环中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44959659
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号