Javascript I'；I’’我想在点击“开播”或“关播”按钮时让一组客户在线。我也要展示一切；无论是广播还是非广播

我需要这个代码的帮助。就像上面的标题中所描述的，我想点击一个按钮来查看twitch客户端列表，其中一个部分在广播中，另一个部分在非广播中，或者甚至显示所有twitch客户端当前是否正在广播。我的HTML和javascript代码如下：

$（文档）.ready（函数（）{
用户=[“ESL_SC2”、“OgamingSC2”、“freecodecamp”、“storbeck”、“habathcx”、“RobotCaleb”、“Noobs2nijas”、“ZoomPC”、“Xbox”、“Wolsk”、“silgarth”]；
for（设i=0；i
非空中播放
”
}否则{
pre.innerHTML+=“
在线播放”
}
},
错误：函数（）{
警报（“服务器出现问题…”）；
}
});
},
错误：函数（）{
警报（“服务器出现问题…”）；
}
});
}
});
。容器流体{
背景色：#1565C0；
最小高度：630px；
背景图像：url（'data:image/svg+xml，%3Csvg width=“100”height=“20”viewBox=“0 100 20”xmlns=”http://www.w3.org/2000/svg%3E%3cd路径="7.6.139-1.139-1.139-1.139-1.139-1.691-1.691-1.8-8.2338-8-8-2.288-8 8.288 8.288 8.288 8 8.288 8 8 8 8 8.7 7 7 7.7 7 7-2-2-2.288-2.8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 0 0 0.568 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 4 2.275h6.335zm0-20C13.258 2.8928.077 4 0 4V2c5.744 0 9.951-.5744.4 4 4 4 4 4 4 4 4 4 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2 2 2 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 15.362 1 2 2 2 2 2 2 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 1.145 3.397 23.34 7.063l-1.767.662C13.22310.84 8.163 12 0 12v2z“fill=“%239C92AC”fill opacity=“0.4”fill rule=“evenodd”/%3E%3C/svg%3E”）；
}
.出去{
/*边框：1px纯棕色*/
宽度：500px；
利润上限：110像素；
边缘底部：30px；
高度：自动；
背景色：rgba（0,0,0,0.5）；
}
.rw{
利润上限：-15px；
宽度：470px；
左边距：-1px；
边缘底部：5px；
}
rs{
高度：30px；
边缘顶部：5px；
宽度：470px；
左边距：-1px；
}
jmb先生{
边缘顶部：20px；
}
.线路{
利润上限：-25px；
}
.上市{
边框：1px纯灰；
宽度：470px；
高度：110px；
左边距：-1px；
边缘顶部：10px；
利润底部：4倍；
}
.标志{
/*边框：1px固体白烟*/
高度：104px；
左边距：4倍；
边缘顶部：2倍；
背景色：白烟；
}
.logo img{
填充顶部：8px；
}
.文本{
/*边框：1px固体白烟*/
高度：48px；
宽度：340px；
左边距：123px；
边缘顶部：2倍；
背景色：黑色；
}
.地位{
边框：1px固体白烟；
高度：54px；
宽度：340px；
左边距：-1px；
边缘顶部：48px；
}
.霓虹灯{
字体大小：粗体；
填充顶部：22px；
}
.name>p{
填充顶部：20px；
字体大小：16px；
}
在频道的父div上在线或离线添加类

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";
}

PS：这是一个更好的地方，可以更快地得到答案。
我本来可以去那里，但我不会像现在这样直接得到答案。谢谢
$('.all').on('click', function(){
  $('.listing').show();
})

$('.on').on('click', function(){
  $('.listing').hide();
  $('.online').show();
});

$('.off').on('click', function(){
  $('.listing').hide();
  $('.offline').show();
});