如何使用jQuery添加和if条件到append()

时间:2018-05-15 20:51:12

标签: javascript jquery algorithm if-statement append

我正在完成一个TwitchTV项目,但一直在努力弄清楚如何使用jQuery附加一些代码。此代码需要检查API以查看用户是否正在进行流式处理,然后,根据他或她是否在线,将信息附加到已生成动态的jQuery生成的html。

看看我的JavaScript代码。现在,在“状态”行下,您将看到每个用户都有信息。如果用户处于离线状态,我只想将html读取为“离线”。如果用户在线,我希望它读取“在线:”以及该频道的简短描述(流信息是存储在名为“stream”的变量中,简短描述存储在名为“statusWhat”的变量中。

如果这有点令人困惑,我很抱歉。我认为看到代码会使事情变得清晰:https://codepen.io/JayDevelopment/pen/bMKrLK 1

$(function() {
  var twitchers = [
    "ESL_SC2",
    "OgamingSC2",
    "cretetion",
    "storbeck",
    "habathcx",
    "RobotCaleb",
    "noobs2ninjas"
  ];

  //FREECODECAMP STREAM INFO AND API CALL
  var url =
    "https://api.twitch.tv/kraken/streams/freecodecamp?client_id=jjqkn1xu4g4rx7d3e1o5refrmw5bhd";
  $.getJSON(url, function(data) {
    if (data.stream === null) {
      $("#fccStatus").html("OFFLINE");
    } else {
      $("#fccStatus").html("FreeCodeCamp is ONLINE");
    }
    $('#fccGame').html()
  });
  for (var i = 0; i < twitchers.length; i++) {
    $.ajax({
      type: "GET",
      url: "https://api.twitch.tv/kraken/channels/" +
        twitchers[i] +
        "?client_id=jjqkn1xu4g4rx7d3e1o5refrmw5bhd",
      success: function(dataFor) {
        $.getJSON(
          "https://api.twitch.tv/kraken/streams/" +
          dataFor.name +
          "?client_id=jjqkn1xu4g4rx7d3e1o5refrmw5bhd").done(function(data2) {
            var name = dataFor.name;
            var logo = dataFor.logo;
            var statusWhat = dataFor.status;
            var stream = data2.stream;

            $('#info').append('<div class="row block">' +
              '<div class="col-sm">' +
              '<h1>' + '<img src=' + logo + '>' + '</h1>' +
              '</div>' +
              '<div class="col-sm">' +
              '<h1>' + name + '</h1>' +
              '</div>' +
              '<div class="col-sm" id="change">' +
              '<a href="https://www.twitch.tv/' + name + '"' + ' target="blank">' +
              '<h1 id="status">' + stream + ': ' + statusWhat + '</h1>' +
              '</a></div></div></div>')

            /* if (stream === null) {
              $("#status").append('OFFLINE');
            } else {
              $("#status").append('ONLINE: ' + statusWhat);
            }  */
          }
        );
      },
      error: function(error) {
        $("#logo").append('<img src=' + '#' + '>' + "<br>");
        $("#name").append('Invalid' + "<br>");
        $('#status').append('Not found');
      }
    });
  }
});

1 个答案:

答案 0 :(得分:1)

您可以在分配到stream变量时执行此操作:

if (data2.stream) {
    stream = data2.stream + " ONLINE: " + statusWhat;
} else {
    stream = "OFFLINE";
}