Javascript Twitch stream图像并仅在顶部在线流上排序

你好，JavaScripts程序员

在stackoverflow中，我得到一个代码，谁显示Twitch拖缆，谁在线，谁不在线。（代码：）现在我想升级此代码，使用流图像和排序第一个在线拖缆。例如：

默认代码结果：

streamer1 (Offline)
streamer2 (Offline)
streamer3 (Online)
streamer4 (Online)

但我想要这样的东西：

IMAGE streamer3 (Online)
IMAGE streamer4 (Online)
IMAGE streamer1 (Offline)
IMAGE streamer2 (Offline)

我不太懂JavaScript，这就是我想在那里得到帮助的原因

任何人都可以，请告诉我，这是怎么回事

谢谢你

为了让javascript代码变得出色，你可以或需要添加很多东西。。。 我可以告诉您的是，将所有javascript代码更改为以下示例之一：

---

示例一：

var hello=“hello”；
/*这是创建javascript方法的另一种方法
功能拖缆（名称、状态、url）{
this.name=名称；
这个状态=状态；
this.url=url；
} */
//拖缆对象
//在这里，我们将存储来自的必要信息
//TwitchAPI json文件
var拖缆={
id:0，
状态：“头衔”，
姓名：“斯特里玛”，
显示名称：“Strimmah”，
url:“https://secure.twitch.tv/freecodecamp“，//测试url
预览：[“大”、“中”、“小”、“模板”]，
游戏：“游戏3”，
观众:0，
初始化：函数（名称、状态、游戏、url）{
this.name=名称；
这个状态=状态；
这个游戏=游戏；
this.url=url；
},
init：函数（名称、状态、游戏、查看器、url）{
this.name=名称；
这个状态=状态；
这个游戏=游戏；
this.viewers=观众；
this.url=url；
},
InitPreviewMgs：函数（大、中、小、模板）{
this.previewImgs[0]=大；
这个.预览wimgs[1]=中等；
这个。预览[2]=小；
this.previewImgs[3]=模板；
}
};
//删除测试变量
var测试=对象。创建（拖缆）；
var backUpImage=”https://static-cdn.jtvnw.net/ttv-static/404_preview-640x360.jpg";
可变温度拖缆=[
“nokss68”，
“蛇606”，
“团队成员”，
“GTV”，
“sokkaenpyjama”，
“elfepurpl3”，
“轻匈奴”，
“太空结块”，
“nagatsu6”，
“xng360”，
“纳森科”，
“giiskaa”，
“floki_live”，
“皮艇箱”，
“jejen64”，
“spivix”，
“keryg4n”，
“mehdii95150”，
“Geekyfr先生”，
“zaykerz92”，
“etsaltdit”，
“x_dyn_x”，
“martind32”，
“el_fideo11”，
“xmisticoxx”，
“zookervinc78”，
“MrCraaftt”，
“killerelite84”，
“Aqu0ss”，
“panteleimon42”，
“veynstream”，
“le_salty_玩家”
];
变量streamDisplayStatus=1；//0-全部，1-仅在线，2-仅离线
var twitchURL=”https://secure.twitch.tv/"; // 创建频道URL的步骤
var-travelarray=[]；
var showOffline=true；
//入口点，
$（文档）.ready（函数（）{
/*对于（var i=0；i”+streamData.viewers+“南部人员”+
“
”
+ '';
var final=divStart+divstreamritem+divEnd；
$（最终）。附加到（“.livechannels容器”）；
}
函数clearstreamerdomines（）{
$（“div”）。移除（“拖缆容器”）；
}

正文{
背景色：#141414；
左边距：30px；
右边距：30px；
}
/*
.标题标题{
利润上限：35px；
颜色：#中交；
}
.导航栏集装箱{
颜色：#中交；
}
.navbar集装箱ul{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
}
.navbar集装箱有限公司{
浮动：左；
填充：7px 7px；
边框底部：实心1px#4848；
}
.导航栏容器a{
颜色：#中交；
文本对齐：居中；
填充：7px 1px；
文字装饰：无；
}
.navbar容器a：悬停{
颜色：白色；
}
查看您单击导航栏上的哪个按钮
.主动{
颜色：#中交；
边框底部：纯色1px白色；
}
.navbar容器。活动：悬停{
颜色：#中交；
文字装饰：下划线；
}*/
.直播频道{
颜色：#中交；
}
.拖缆容器{
显示：内联块；
宽度：35%；
最小宽度：150px；
高度：150像素；
最小高度：50px；
位置：相对位置；
利润率：15px 10px 5px 0px；
}
.拖缆项目{
保证金：0自动；
填充：0px 0px 0px