javascript - 为什么我的 jquery hide 和 show 方法不适用于在线离线链接

Question

我有一个小应用程序，可以显示 twitchTV channel 和用户。当我点击“在线”链接时，仅显示在线用户。当我点击时也是如此“离线”链接。 (导航变量)问题是我没有看到逻辑在页面上生效。我缺少什么？谢谢

var status;
var names = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]
var url = "https://wind-bow.gomix.me/twitch-api/";

$(document).ready(function() {
  $("#allusers").click(function() {
    $("#onlineuser").show();
    $("#offlineuser").show();
  });
  $("#online").click(function() {
    $("#onlineuser").show();
    $("#offlineuser").hide();

  });
  $("#offline").click(function() {
    $("#offlineuser").show();
    $("#onlineuser").hide();
  });
  getData();
});

function getData() {
  //for every single stream/channel a url need build
  for (var i = 0; i < names.length; i++) {
    getStreams(url, "streams", names[i]);
    getChannel(url, "channels", names[i]);
  }
}

//getting stream status json data
function getStreams(url, type, name) {
  url += '/' + type + '/' + name + '?callback=?';
  // console.log(url);
  $.getJSON(url, function(data) {
    console.log(data);
    if (data.stream !== null) {
      status = "online";
      // console.log(data);
    } else {
      status = "offline";
    }
  });
}

//getting channel json data
function getChannel(url, type, name) {
  url += type + '/' + name + '?callback=?';
  // console.log(url);
  $.getJSON(url, function(data) {
    // console.log(data);
    var output = document.getElementById("output");
    var logo = data.logo;
    var title = data.status;
    var channel = data.url;
    // console.log(logo +", "+title+", "+channel);
    //formatting individual channels

    output.innerHTML += '<div id="' + status + 'user" class="channel row user-data"><div ><img id="logo" src="' + logo + '"></div><a href="' + channel + '" target="_blank"><h5 id="user">' + name + '</h5></a><div class="col-md-2 user-data"><strong>' + status + '</strong></div><div id="title" class="col-md-5 user-data">' + ((title.length > 40) ? title.substring(0, 40).concat("...") : title) + '</div></div>';
  });
}

body {
  background-color: #445f44;
}

.user-data {
  padding-top: 10px;
  padding-left: 5px;
  padding-right: 5px;
  color: black;
  font-size: 17px;
  background-color: white;
  opacity: 0.5;
  margin-bottom: 5px;
}

#header {
  background-color: #333854
}

#user {
  font-size: 20px;
  padding-left: 10px;
  padding-right: 10px;
}

img {
  width: 50px;
  height: 50px;
  border-radius: 300px;
  border-color: green;
  border-width: 1px;
  border-style: solid;
}

.border {
  border-style: solid;
  border-width: 1px;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" class="container ">
  <div id="header" class="jumbotron" id="header">
    <h1 class="text-center" style="color: black;">TwitchTV Streamers</h1>
    <ol class="breadcrumb">
      <li class="active"><a id="allusers" href="#"><strong>All Users</strong></a></li>
      <li><a id="online" href="#"><strong>Online</strong></a></li>
      <li><a id="offline" href="#"><strong>Offline</strong></a></li>
    </ol>
  </div>
  <!-- output here!   -->
  <div class="row">
    <div id="output" class="col-lg-12">
    </div>
  </div>
</div>

Answer 1

似乎您正在尝试使用 id 来定位多个元素，请尝试使用类。

例如:

$("#online").click(function(){
  $(".onlineuser").show();
  $(".offlineuser").hide();
});

output.innerHTML += '<div class="'+status+'user channel row user-data"><div ><img id="logo" src="'+logo+'"></div><a href="'+channel+'" target="_blank"><h5 id="user">'+name+'</h5></a><div class="col-md-2 user-data"><strong>'+status+'</strong></div><div id="title" class="col-md-5 user-data">'+((title.length > 40) ? title.substring(0, 40).concat("...") : title)+'</div></div>'; 

链接到包含这些更改的 codepen:https://codepen.io/anon/pen/awKBEM