Question

我正在为freeCodeCamp开发一个项目，我正在通过twitch.tv用户数组运行for循环。我已经为我的数组中的每个用户名创建了一个表，它应该添加新行，用数据填充它，然后移动到下一个元素。问题是每次运行代码时，它似乎都在数组中选择一个随机索引并运行循环以等于数组中的元素数。我认为这是一个显示问题，因为它为每个单独的呼叫连接到服务器。

希望有人可以帮助我。

var twitch = ['ESL_SC2', 'OgamingSC2', 'cretetion', 'freecodecamp', 'storbeck', 'habathcx', 'RobotCaleb', 'noobs2ninjas', 'ESL_LOL', 'wow_2', 'brunofin', 'comster404']

var streams = 'https://wind-bow.gomix.me/twitch-api/streams/';
var channels = 'https://wind-bow.gomix.me/twitch-api/channels/';
var users = 'https://wind-bow.gomix.me/twitch-api/users/';


var getStream = function(data) {

  if (data.stream === null) {
    $('.status').append('Offline');
  } else {
    var streamStatus = data.stream.channel.status;
    var html = '<td class="stream">' + streamStatus + '</td>';
    $('.stream').html(html);
  }

}
var getChannels = function(data) {
  var game = data.display_name;

  var logoHtml = data.logo;
  var channelUrl = data.url;
  var gameHtml = '<a href=' + channelUrl + ' target="_blank">' + game + '</a>';
  var logoHtml = '<img class="image" src="' + logoHtml + '">';
 
  $('.game').html(gameHtml);
  $('.logo').html(logoHtml);

}


$(document).ready(function() {

  $('.choice').on('click', function() {
    $('.choice').removeClass('selected');
    $(this).toggleClass('selected');
  });

  var table = $('<table id="twitch-table"></table>').appendTo('#content');

  for (var i = 0; i < twitch.length; i++) {
    var row = $('<tr></tr>').appendTo(table);
    $('<td class="logo"></td>').appendTo(row);
    $('<td class="game"></td>').appendTo(row);
    $('<td class="stream"></td>').appendTo(row);

    $.getJSON(streams + twitch[i], getStream, 'jsonp');
    $.getJSON(channels + twitch[i], getChannels, 'jsonp');



  }

});

body {
  padding: 0;
  margin: 0;
  font-family: 'Oswald', sans-serif;
  font-size: 100%;
}

a {
  text-decoration: none;
}

#main {
  width: 600px;
  margin: 2% auto 0;
}

#header {
  padding: 0;
  margin: 0;
  background: #116466;
  color: #d1e8e2;
  line-height: 100px;
  width: 100%;
}

h1 {
  margin: 0 0 0 5%;
  font-size: 300%;
}

#row {
  background: #285277;
  width: 100%;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
}

.choice {
  position: relative;
  text-align: center;
  width: 33%;
  background: #285277;
  padding: 5px 10px;
  display: inline-block;
  color: #d1e8e2;
  font-size: 150%;
}

.choice a {
  /*padding: 5px 20px;*/
  color: #d1e8e2;
}

#content {
  width: 100%;
  background: #efefef;
}


/*
.choice a:active {
	background: #1E3D59;
}
*/

.selected {
  background: #1E3D59;
}

.selected:after {
  content: '';
  position: absolute;
  top: 100%;
  right: 45%;
  width: 0;
  height: 0;
  border-top: solid 10px #1E3D59;
  border-left: solid 10px transparent;
  border-right: solid 10px transparent;
}

table {
  width: 600px;
}

tr {
  margin: 5px 0;
  display: flex;
  width: 100%;
  justify-content: space-between;
}

td {
  border-collapse: collapse;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
}

.game {
  padding-left: 10px;
  width: 100px;
  font-size: 120%;
  line-height: 75px;
  text-overflow: ellipsis;
}

.game a {
  color: #111;
}

.image {
  height: 75px;
  width: 75px;
}

.logo {
  padding: 3px 5px;
  box-sizing: border-box;
}

.stream {
  padding-right: 10px;
  width: 350px;
  display: inline-block;
  text-overflow: ellipsis;
  line-height: 75px;
}

<!DOCTYPE html>

<html>

<head>
  <title>Twitch.tv JSON API</title>
  <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
  <script src="https://use.fontawesome.com/57c9bf8971.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

<body>
  <div id='main'>
    <header id='header'>
      <h1>Twitch Streamers</h1>
    </header>
    <div id='row'>
      <ul>
        <li class='choice selected'><a href='#'>All</a></li>
        <li class='choice'><a href='#'>Online</a></li>
        <li class='choice'><a href='#'>Offline</a></li>
      </ul>
    </div>
    <div id='content'>

    </div>
  </div>
</body>

</html>

Answer 1

问题在于以下几点：

$('.game').html(gameHtml);
$('.logo').html(logoHtml);
$('.stream').html(html);

他们选择game类（或logo或stream）的所有行并更改所有行。

请参阅here固定的JSfiddle。

Answer 2

您需要正确使用回调功能。您的 getStreams 和 getChannels 函数正在将数据应用于所有行，而不是其各自的行。

以下是修改后的回调函数声明：

var Calendar = require('react-native-calendar-component');

export default class proj extends Component {

constructor(props) {
super(props);
this.state = {
date: new Date()
};
}

render() {
return (
<Calendar
date={this.state.date}
onPrevButtonPress={() => this.handlePrevButtonPress()}
onNextButtonPress={() => this.handleNextButtonPress()}
onDateSelect={(date) => this.handleDateSelect(date)} />
);
}
}

并在var getStream = function(url, idx) { $.getJSON(url, function(data){ if (data.stream === null) { $('.status').append('Offline'); } else { var streamStatus = data.stream.channel.status; var html = '<td class="stream">' + streamStatus + '</td>'; $('tr').eq(idx).find('.stream').html(html); } }); } var getChannels = function(url, idx) { $.getJSON(url, function(data){ var game = data.display_name; var logoHtml = data.logo; var channelUrl = data.url; var gameHtml = '<a href=' + channelUrl + ' target="_blank">' + game + '</a>'; var logoHtml = '<img class="image" src="' + logoHtml + '">'; $('tr').eq(idx).find('.game').html(gameHtml); $('tr').eq(idx).find('.logo').html(logoHtml); }); }循环中将其称为：

for

JSFiddle供您参考：https://jsfiddle.net/yogesh214/yxLu9mwg/4/

Answer 3

我现在明白你的问题了：

正如@Shalom Peles所说，您正在使用$('.stream')选择所有文档中的元素.stream，而不仅仅是行中的元素。

而是使用.find在元素中进行选择。例如：

let row = $('<div class="my-row"></div>'); // creates a row
row.append(/* ... */);
let elementInsideRow = row.find('.my-column'); // this selects an element *inside* the row element.

另外：use let instead of var表示所有声明

我编辑了您的代码以用于流。为渠道做同样的事情。阅读评论。

var twitch = ['ESL_SC2', 'OgamingSC2', 'cretetion', 'freecodecamp', 'storbeck', 'habathcx', 'RobotCaleb', 'noobs2ninjas', 'ESL_LOL', 'wow_2', 'brunofin', 'comster404']

var streams = 'https://wind-bow.gomix.me/twitch-api/streams/';
var channels = 'https://wind-bow.gomix.me/twitch-api/channels/';
var users = 'https://wind-bow.gomix.me/twitch-api/users/';

// refactor this like I did below
var getChannels = function(data) {
  var game = data.display_name;

  var logoHtml = data.logo;
  var channelUrl = data.url;
  var gameHtml = '<a href=' + channelUrl + ' target="_blank">' + game + '</a>';
  var logoHtml = '<img class="image" src="' + logoHtml + '">';
 
  $('.game').html(gameHtml);
  $('.logo').html(logoHtml);

}


$(document).ready(function() {

  $('.choice').on('click', function() {
    $('.choice').removeClass('selected');
    $(this).toggleClass('selected');
  });

  var table = $('<table id="twitch-table"></table>').appendTo('#content');

  // you need to use `let` here because you need block scope
  // in general, use `let` instead of `var` everywhere.
  // https://stackoverflow.com/questions/21906133/when-should-i-use-let-and-var
  for (let i = 0; i < twitch.length; i++) {
    let row = $('<tr></tr>');
    $.getJSON(streams + twitch[i], function(data) {
        
        $('<td class="logo"></td>').appendTo(row);
        $('<td class="game"></td>').appendTo(row);
        $('<td class="stream"></td>').appendTo(row);
        if (data.stream === null) {
            // instead of selecting all the elements with `.status`, use `find` to select *within* the `row` element
            // $('.status').append('Offline');
            row.find('.status').append('Offline');
        } else {
            var streamStatus = data.stream.channel.status;
            var html = '<td class="stream">' + streamStatus + '</td>';
            row.find('.stream').html(html);
        }
        // apend it when you're done
        row.appendTo(table);
    }, 'jsonp');

    // make the same changes for channel
    //$.getJSON(channels + twitch[i], getChannels, 'jsonp');



  }

});

body {
  padding: 0;
  margin: 0;
  font-family: 'Oswald', sans-serif;
  font-size: 100%;
}

a {
  text-decoration: none;
}

#main {
  width: 600px;
  margin: 2% auto 0;
}

#header {
  padding: 0;
  margin: 0;
  background: #116466;
  color: #d1e8e2;
  line-height: 100px;
  width: 100%;
}

h1 {
  margin: 0 0 0 5%;
  font-size: 300%;
}

#row {
  background: #285277;
  width: 100%;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
}

.choice {
  position: relative;
  text-align: center;
  width: 33%;
  background: #285277;
  padding: 5px 10px;
  display: inline-block;
  color: #d1e8e2;
  font-size: 150%;
}

.choice a {
  /*padding: 5px 20px;*/
  color: #d1e8e2;
}

#content {
  width: 100%;
  background: #efefef;
}


/*
.choice a:active {
	background: #1E3D59;
}
*/

.selected {
  background: #1E3D59;
}

.selected:after {
  content: '';
  position: absolute;
  top: 100%;
  right: 45%;
  width: 0;
  height: 0;
  border-top: solid 10px #1E3D59;
  border-left: solid 10px transparent;
  border-right: solid 10px transparent;
}

table {
  width: 600px;
}

tr {
  margin: 5px 0;
  display: flex;
  width: 100%;
  justify-content: space-between;
}

td {
  border-collapse: collapse;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
}

.game {
  padding-left: 10px;
  width: 100px;
  font-size: 120%;
  line-height: 75px;
  text-overflow: ellipsis;
}

.game a {
  color: #111;
}

.image {
  height: 75px;
  width: 75px;
}

.logo {
  padding: 3px 5px;
  box-sizing: border-box;
}

.stream {
  padding-right: 10px;
  width: 350px;
  display: inline-block;
  text-overflow: ellipsis;
  line-height: 75px;
}

<!DOCTYPE html>

<html>

<head>
  <title>Twitch.tv JSON API</title>
  <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
  <script src="https://use.fontawesome.com/57c9bf8971.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

<body>
  <div id='main'>
    <header id='header'>
      <h1>Twitch Streamers</h1>
    </header>
    <div id='row'>
      <ul>
        <li class='choice selected'><a href='#'>All</a></li>
        <li class='choice'><a href='#'>Online</a></li>
        <li class='choice'><a href='#'>Offline</a></li>
      </ul>
    </div>
    <div id='content'>

    </div>
  </div>
</body>

</html>

对于循环运行数组的长度，但显示一个元素array.length次

3 个答案: