如何在jQuery的append()方法中添加if条件判断

嘿，我看了你的Twitch项目代码，知道你卡在jQuery append和直播状态判断这儿了。咱们来一步步解决这个问题～

问题根源分析 #

你注释掉的判断逻辑没生效，主要是两个核心问题：

1. 重复的ID属性：循环生成的每个区块里都用了<h1 id="status">，但HTML要求ID必须唯一，所以$("#status")只会匹配到第一个生成的元素，后面的状态永远不会被修改。
2. 时机与逻辑顺序错误：你先把包含stream变量的HTML append到页面，再尝试修改状态，但此时不仅选择器失效，stream本身是个对象（在线时）或null（离线时），直接插入到HTML里会显示[object Object]，根本不是你想要的文本。

修复方案：构建HTML时直接嵌入动态状态 #

我们可以提前根据API返回的stream值生成对应的状态文本，然后直接把文本嵌入到要append的HTML字符串中，避免事后修改的麻烦。

修改后的核心代码如下：

$(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;
          // 处理用户无logo的情况，避免图片加载错误
          var logo = dataFor.logo || "https://via.placeholder.com/100";
          var statusWhat = dataFor.status;
          var stream = data2.stream;

          // 提前生成状态文本
          var statusText;
          if (stream === null) {
            statusText = "OFFLINE";
          } else {
            statusText = "Online: " + statusWhat;
          }

          // 用模板字符串构建HTML，更清晰不易出错
          $('#info').append(`
            <div class="row block">
              <div class="col-sm">
                <h1><img src="${logo}" alt="${name} logo"></h1>
              </div>
              <div class="col-sm">
                <h1>${name}</h1>
              </div>
              <div class="col-sm">
                <a href="https://www.twitch.tv/${name}" target="_blank">
                  <h1>${statusText}</h1>
                </a>
              </div>
            </div>
          `);
        });
      },
      error: function(error) {
        // 错误情况下直接生成完整的错误区块，避免操作不存在的ID
        $('#info').append(`
          <div class="row block">
            <div class="col-sm">
              <h1><img src="#" alt="No Logo"></h1>
            </div>
            <div class="col-sm">
              <h1>Invalid</h1>
            </div>
            <div class="col-sm">
              <h1>Not found</h1>
            </div>
          </div>
        `);
      }
    });
  }
});

关键修改点说明 #

• 用模板字符串替代字符串拼接：反引号`包裹的模板字符串支持直接插入变量，代码可读性更高，也减少了拼接错误。
• 提前生成状态文本：根据stream是否为null，直接生成要显示的状态内容，再嵌入到HTML中，彻底避免事后修改的问题。
• 移除重复ID：删除了id="status"和id="change"这类重复的ID属性，符合HTML规范，也避免了选择器冲突。
• 容错处理：给logo设置了默认占位图，防止用户无logo时页面出现错误图标。
• 错误回调优化：直接生成完整的错误提示区块，不再依赖页面上固定的ID元素。

内容的提问来源于stack exchange，提问作者Jordan Merrill