私のjquery非表示と表示方法がオンラインオフラインリンクで機能しない理由

Question

私はtwitchTVチャンネルとユーザーを表示する小さなアプリを持っています。 「オンライン」リンクをクリックすると、オンラインユーザーのみが表示されます。 「オフライン」リンクをクリックすると同じことが起こります。 （ナビゲーションvar）問題は、私はロジックがページに反映されて表示されません。私は何が欠けていますか？おかげ

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を使用しようとしているように、代わりにクラスを使用してみてくださいようです。

例：これらの変更とcodepenへ

$("#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>';

リンク：https://codepen.io/anon/pen/awKBEM