javascript - 当我点击播出或关闭按钮时，我想让一组客户在线。我也想全部展示；播出和播出

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

在 channel 的父 div 上添加在线或离线类(class)。

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 的按钮时。显示所有带有 `listing 类的 div。

• 当您单击类为“on”的按钮时。显示所有带有 classonline` 的 div。

• 当您点击类为 off 的按钮时，显示类为“offline”的所有 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();
});

附言:FCC forum将是获得更快答案的更好地方。