Question

我有一个API调用，它通过一组用户进行解析，同时将一些JSON数据元素附加到带有for循环的div。我的问题是我有一个if语句嵌套在另一个API调用中检查流状态。如果stream为null，则应附加img，反之亦然。

问题是if语句似乎在解析用户数组，但随后将语句的所有结果附加到每个用户行。我试图将if语句分别应用于数组中的每个用户，然后附加正确的img。我假设问题是每个动态附加的div都具有if语句所针对的相同类。让我知道你们的想法。

$(document).ready(function() {
  var users = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];

  for (var i = 0; i < users.length; i++) {

    // channel call for info, name, logo
    $.getJSON('https://wind-bow.gomix.me/twitch-api/channels/' + users[i] + '?callback=?', function(datax) {
      console.log(datax);
      $('#streams-list').append(
        '<div class="row">' +
        '<div class="col-md-1">' +
        '<img src=' + datax.logo + ' class="stream-icon">' +
        '</div>' +
        '<div class="col-md-9 stream-row">' +
        '<li class="list-group-item stream-list">' + datax.name + '</li>' +
        '</div>' +
        '<div class="col-md-1">' +
        '<li class="list-group-item status-row"></li>' +
        '</div>' +
        '<div class="list-group-item col-md-1 icon-shell status-symbol" >' +
        '</div>' +
        '</div>'
      );
    });
  }
  var online = [];
  var offline = [];

  for (var x = 0; x < users.length; x++) {
    // stream call for status
    $.getJSON('https://wind-bow.gomix.me/twitch-api/streams/' + users[x] + '?callback=?', function(data) {
      var status = data.stream;
      console.log(status);
      if (status == null) {
        $('.status-symbol').append(
          '<img src="icons/ic_highlight_off_black_48dp_2x.png" class="status">'
        )
      } else {
        $('.status-symbol').append(
          '<img src="icons/ic_done_black_48dp_2x.png" class="status">'
        )
      }
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

向用户添加数据属性data-user-id，以帮助您追加到正确的用户，此时$('.status-symbol')选择器会附加到所有prezent状态符号元素

$(document).ready(function() {
var users = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];

for (var i = 0; i < users.length; i++) {

    // channel call for info, name, logo
    $.getJSON('https://wind-bow.gomix.me/twitch-api/channels/' + users[i] + '?callback=?', function (datax) {
        console.log(datax);
        $('#streams-list').append(
            '<div class="row">' +
            '<div class="col-md-1">' +
            '<img src=' + datax.logo + ' class="stream-icon">' +
            '</div>' +
            '<div class="col-md-9 stream-row">' +
            '<li class="list-group-item stream-list">' + datax.name + '</li>' +
            '</div>' +
                '<div class="col-md-1">' +
                '<li class="list-group-item status-row"></li>' +
            '</div>' +
            '<div data-user-id="'+ i +'" class="list-group-item col-md-1 icon-shell status-symbol" >' +
            '</div>' +
            '</div>'
        );
    });
}
var online = [];
var offline = [];

for (var x = 0; x < users.length; x++) {
    // stream call for status
    $.getJSON('https://wind-bow.gomix.me/twitch-api/streams/' + users[x] + '?callback=?', function (data) {
        var status = data.stream;
         console.log(status);
        if (status==null){
            $('.status-symbol[data-user-id="'+ users[i] +'"]').append(
                '<img src="icons/ic_highlight_off_black_48dp_2x.png" class="status">'
            )
        } else {
            $('.status-symbol[data-user-id="'+ i +'"]').append(
                '<img src="icons/ic_done_black_48dp_2x.png" class="status">'
            )
        }
    });
}
});

Answer 2

您的代码存在两个问题：$('.status-symbol').append()来电的时间和背景。

编写代码的方式，如果在第一个循环中的第二个循环之前的第二个循环中调用任何ajax，它甚至都不会起作用。 .getJSON是异步的，这意味着处理时间和执行顺序是可变的。只有在该用户完成getJSON调用后，才需要处理if / else语句回调。

function logStatus(data, $row) {
  var status = data.stream;
  console.log(status);
  if (status == null) {
    $row.find('.status-symbol').append(
      '<img src="icons/ic_highlight_off_black_48dp_2x.png" class="status">'
    )
  } else {
    $(row).find('.status-symbol').append(
      '<img src="icons/ic_done_black_48dp_2x.png" class="status">'
    )
  }
}

for (var i = 0; i < users.length; i++) {
  (function(user) { //use a self-invoking function to protect the reference to user
    $.getJSON('https://wind-bow.gomix.me/twitch-api/channels/' + user + '?callback=?', function(datax) {
      var $row = $(
        '<div class="row">' +
        '<div class="col-md-1">' +
        '<img src=' + datax.logo + ' class="stream-icon">' +
        '</div>' +
        '<div class="col-md-9 stream-row">' +
        '<li class="list-group-item stream-list">' + datax.name + '</li>' +
        '</div>' +
        '<div class="col-md-1">' +
        '<li class="list-group-item status-row"></li>' +
        '</div>' +
        '<div class="list-group-item col-md-1 icon-shell status-symbol" >' +
        '</div>' +
        '</div>'
      ).appendTo('#streams-list');
      $.getJSON('https://wind-bow.gomix.me/twitch-api/streams/' + user + '?callback=?', function(data) {
        logStatus(data,$row);
      });
    });
  })(users[i]);
}

如果带有动态附加div的语句

2 个答案: