我正在创建Twitch TV作为Freecodecamp挑战。我正在尝试获取在线和离线频道,我得到它但是当我尝试循环过滤数组时会出现问题。
问题是循环过滤后的数组会创建一个加法li,并将数组元素中的一个加倍。
例如:ch1,ch2,ch3,ch4,ch5,ch5和空白li。
以下是一些代码:
function loopChannels(array) {
for(var i=0; i<array.length;i++) {
$("h3").eq(i).html(array[i].display_name);
$(".logo").eq(i).attr("src", array[i].logo);
$(".status").eq(i).html(array[i].status == null ? "offline" : array[i].status);
$(".link").attr("target", "_blank");
$(".link").eq(i).attr("href", array[i].url);
a.append(title);
li.append(img,a,stat);
ul.append(li);
}
}
$("#online").on("click", function() {
var online = channels.filter(c => c.status !== null);
console.log(online.length);
loopChannels(online);
});
$("#offline").on("click", function() {
var offline = channels.filter(c => c.status == null);
console.log(offline.length);
loopChannels(offline);
});
答案 0 :(得分:1)
完全正常工作的代码:https://codepen.io/anon/pen/rdRzeq
原始代码的一些变化是
empty()
jquery函数清除UL
下的元素,因此会根据条件显示新的在线和离线频道列表基于您提供的代码,我创建了基于jquery的完整代码,如下所示及其工作
var streamers = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
var channels = [];
var online = [];
function loopChannels(array) {
var ul = document.querySelector(".streamers");
array.forEach((ele,i)=> {
var li = $("<li/>", {'class' : 'streamer'}).appendTo(ul);
var img = $("<img />", {'class' : 'logo', "src": ele.logo}).appendTo(li);
var stat = $("<p />", {'class' : 'status', "html": ele.status == null ? "offline" : ele.status}).appendTo(li);;
var a = $("<a />",{'class' : 'link',"target": "_blank", "href": ele.url }).appendTo(li);
var title = $("<h3/>",{'class' : 'strTitle','html': ele.display_name }).appendTo(a);
});
};
streamers.forEach(function(streamer) {
$.getJSON("https://wind-bow.gomix.me/twitch-api/channels/" + streamer + "?callback=?", function(data) {
channels.push(data);
loopChannels(channels);
});
});
$("#online").on("click", function() {
var ul = document.querySelector(".streamers");
$(ul).empty();
var online = channels.filter(c => c.status !== null);
console.log(online.length);
loopChannels(online);
});
$("#offline").on("click", function() {
var ul = document.querySelector(".streamers");
$(ul).empty();
var offline = channels.filter(c => c.status == null);
console.log(offline.length);
loopChannels(offline);
});