如果语句与动态追加div

Question

我有一个API调用是解析通过用户数组，同时将一些JSON数据的元素附加到for循环与div。我的问题是，我有一个嵌套在另一个API调用检查流状态的if语句。如果stream为空，它应该附加一个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

您的代码有两个问题：您的$('.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]); 
} 

Answer 2

添加数据属性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">' 
      ) 
     } 
    }); 
} 
});