我想在点击直播或非直播按钮时让一组客户在线。我也想展示所有;无论是直播还是非直播

Question

我需要有关此代码的帮助。如上标题所述，我想单击一个按钮以查看一个部分的直播和另一部分的离线 twitch 客户端列表，甚至显示当前是否正在广播的所有 twitch 客户端。我的HTML和javascript代码如下：

$(document).ready(function() {
users = ["ESL_SC2", "OgamingSC2", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas", "ZoomPC", "Xbox", "Wolsk", "silgarth"];
for (let i = 0; i < users.length; i++) {
let baseUrl = "https://wind-bow.glitch.me/twitch-api/channels/";
let tailUrl = users[i];
let webLink = baseUrl + tailUrl;
let stream = "https://wind-bow.glitch.me/twitch-api/streams/";
let streamLink = stream + tailUrl;
let pre = document.getElementsByClassName("out")[0];
$.ajax({
url: webLink,
type: "GET",
dataType: "json",
success: function(data) {
console.log(data);



$.ajax({
url: streamLink,
type: "GET",
dataType: "json",
success: function(result) {
console.log(result._links);

if(result.stream === null){
pre.innerHTML += "<div class='row listing'><div class='col-sm-3 logo'><img class = 'img-responsive' src=" + data.logo + "></div><div class='row text'><div class='col-sm-12 name'><p><a href="+ data.url +" target = '_blank'>"  + data.display_name + "</a></p></div><div class='row status'><div class='col-sm-12 worx'><p class='neon' style='color:black;'> OFF-AIR </p></div></div></div>"
}else{
pre.innerHTML += "<div class='row listing'><div class='col-sm-3 logo'><img class = 'img-responsive' src=" + data.logo + "></div><div class='row text'><div class='col-sm-12 name'><p><a href="+ data.url +" target = '_blank'>"  + data.display_name + "</a></p></div><div class='row status'><div class='col-sm-12 worx'><p class='neon' style='color:#32CD32;'> ON-AIR </p></div></div></div>"
}
},
error: function() {
alert("Something went wrong with the server...");
}

});
},
error: function() {
alert("Something went wrong with the server....");
}

});
}
});

.container-fluid{
background-color: #1565C0;
min-height: 630px;
background-image: url('data:image/svg+xml,%3Csvg width="100" height="20" viewBox="0 0 100 20" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M21.184 20c.357-.13.72-.264 1.088-.402l1.768-.661C33.64 15.347 39.647 14 50 14c10.271 0 15.362 1.222 24.629 4.928.955.383 1.869.74 2.75 1.072h6.225c-2.51-.73-5.139-1.691-8.233-2.928C65.888 13.278 60.562 12 50 12c-10.626 0-16.855 1.397-26.66 5.063l-1.767.662c-2.475.923-4.66 1.674-6.724 2.275h6.335zm0-20C13.258 2.892 8.077 4 0 4V2c5.744 0 9.951-.574 14.85-2h6.334zM77.38 0C85.239 2.966 90.502 4 100 4V2c-6.842 0-11.386-.542-16.396-2h-6.225zM0 14c8.44 0 13.718-1.21 22.272-4.402l1.768-.661C33.64 5.347 39.647 4 50 4c10.271 0 15.362 1.222 24.629 4.928C84.112 12.722 89.438 14 100 14v-2c-10.271 0-15.362-1.222-24.629-4.928C65.888 3.278 60.562 2 50 2 39.374 2 33.145 3.397 23.34 7.063l-1.767.662C13.223 10.84 8.163 12 0 12v2z" fill="%239C92AC" fill-opacity="0.4" fill-rule="evenodd"/%3E%3C/svg%3E');
}
.out{
/*border: 1px solid brown;*/
width: 500px;
margin-top: 110px;
margin-bottom: 30px;
height: auto;
background-color: rgba(0, 0, 0, 0.5);
}
.rw{
margin-top: -15px;  
width:470px;
margin-left: -1px;
margin-bottom: 5px;
}
.rs{
height: 30px;
margin-top: 5px;
width:470px;
margin-left: -1px;
}
.jmb{
margin-top: 20px;
}
.line{
margin-top: -25px;
}
.listing{
border: 1px solid grey;
width: 470px;
height: 110px;  
margin-left: -1px;
margin-top: 10px;
margin-bottom: 4px;
}
.logo{
/*border: 1px solid whitesmoke;*/
height: 104px;
margin-left: 4px;
margin-top: 2px;
background-color: whitesmoke;

}
.logo img{
padding-top:8px;

}
.text{
/*border: 1px solid whitesmoke;*/
height: 48px;
width: 340px;
margin-left: 123px;
margin-top: 2px;
background-color: black;


}
.status{
border: 1px solid whitesmoke;
height: 54px;
width: 340px;
margin-left: -1px;
margin-top: 48px;

}
.neon{
font-weight: bold;
padding-top:22px;
}
.name>p{
padding-top:20px;
font-size:16px;

}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="container out">
<div class="jumbotron jmb">
<img class="img-responsive" src="./assets/image/twitch.png" alt="">
</div>
<div class="page-header line"></div>
<div class="row rw">
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary all">ALL</a>
<a href="#" class="btn btn-primary on">ON-AIR</a>
<a href="#" class="btn btn-primary off">OFF-AIR</a>
</div>
</div>
</div>
</div>

Answer 1

在频道的父div 上在线或离线添加课程。

if (result.stream === null) {
pre.innerHTML += "<div class='row listing offline'> .... REST OF THE MARK UP";
} else {
pre.innerHTML += "<div class='row listing online'> .... REST OF THE MARK UP";
}

然后实现按钮的单击处理程序。

• 当您单击带有类all的按钮时。显示所有带有类"列表"的div。

• 当您单击带有"在线. Show all divs with class"类的按钮时。

• 当您在带有类的按钮上打卡时off显示所有带有类"离线"的div。

对于最后两点起作用，您应该隐藏所有带有类列表的div，然后在线/离线显示带有类的div。

$('.all').on('click', function(){
$('.listing').show();
})
$('.on').on('click', function(){
$('.listing').hide();
$('.online').show();
});
$('.off').on('click', function(){
$('.listing').hide();
$('.offline').show();
});

PS：FCC论坛将是一个更好的地方，可以更快地获得答案。