<分区>
<分区>
我真的迷失了这个元素，我基本上想制作一个页面来显示 twitch channel 的状态。 这是 codepen link .
问题是循环似乎在 else 语句完成之前就结束了，所以它每次只显示 1 个 channel 信息。一切都搞砸了。
我只想显示 channel 数组中每个抽动 channel 的一些信息。
$(document).ready(function(){
function gatherChannels(){
var channels = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
for(var i=0;i<channels.length;i++){
currentChannel = channels[i];
(function(someVar){ //<-- and u will get it here
currentChannel = channels[someVar]; // all ur code
})(i);//< -- here u pass ur loop i value
$.getJSON("https://api.twitch.tv/kraken/streams/" + channels[i] + "?callback=?", function(data){
if (data.stream !== null){
$(".main-area").append("<div class ='channels' id='currentChannel'>" + data.stream.channel.status + "</div>");
}
else{
$.getJSON("https://api.twitch.tv/kraken/channels/" + currentChannel + "?callback=?", function(info){
$(".main-area").append("<div class ='channels' id='currentChannel'>" + info.url + "</div>");
});
}
});
}
}
gatherChannels();
});最佳答案
你的 currentChannel 变量被设置在一个循环中，这个循环正在被你的循环修改，当你的第一个 ajax 请求被返回时，循环已经结束，这就是为什么你的 info.url 是最后一个。
您可以将 ajax 调用放入它自己的函数中，如下所示。
$(document).ready(function() {
function gatherChannels() {
var channels = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"],
getChannel = function getChannel(channel) {
$.getJSON("https://api.twitch.tv/kraken/streams/" + channel + "?callback=?", function(data) {
if (data.stream !== null) {
$(".main-area").append("<div class ='channels' id='currentChannel" + channel + "'>" + data.stream.channel.status + "</div>");
} else {
$.getJSON("https://api.twitch.tv/kraken/channels/" + channel + "?callback=?", function(info) {
$(".main-area").append("<div class ='channels' id='currentChannel'" + channel + ">" + info.url + "</div>");
});
}
});
}
for (var i = 0; i < channels.length; i++) {
getChannel(channels[i]);
}
}
gatherChannels();
});body {
background-color: black;
color: #fff;
}
h1 {
text-align: center;
background-color: gray;
padding: 20px;
}
.main-area {
margin-left: auto;
margin-right: auto;
}
.channels {
background: blue;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
color: white;
}<html>
<head>
<title>Twitch Streamer Status</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="main-area">
<h1>Twitch Streamers</h1>
</div>
</div>
</body>
</html>关于javascript - 我不知道如何修复此代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39303048/