JQuery分类链接渲染异常：关联分类仍显示无链接提示

我看了你的代码，这两个问题主要是因为flag变量的作用域和判断逻辑出错导致的，咱们一步步来修复：

问题分析 #

1. 全局flag未重置：你的flag是全局变量，一旦某个分类触发了flag=true，后面所有分类都会继承这个状态，所以即使有链接的分类也会显示无链接提示。
2. 错误的链接匹配判断：link.Category.results.indexOf(category) != -1 && this.category != link.Category.results这个条件里，this.category是未定义的，而且直接比较数组!=永远为真（因为数组是引用类型），这会导致每次遍历到不匹配的链接时就把flag设为true，完全不符合需求。
3. 提示添加时机错误：你在遍历链接之前就判断flag，这时候flag的状态根本还没根据当前分类的链接情况更新。

修复方案 #

我们需要做这几个关键修改：

• 把状态标记移到每个分类的循环内部，每次处理新分类时重置状态
• 先遍历所有链接，收集当前分类下的有效链接，同时标记该分类是否有链接
• 遍历完链接后，再判断如果没有匹配的链接，才添加无关联提示

修改后的完整代码 #

JavaScript #

var gLinks = [
  {
    "__metadata": { "id": "22", "uri": "http://www.whatever.com", "etag": "\"3\"", "type": "SP.Data.LinksListItem" },
    "Id": "207", "Title": "Link 01 - test category 01", "Link": "https://www.google.com",
    "Category": { "__metadata": { "type": "Collection(Edm.String)" }, "results": [ "Test Category 01" ] },
    "Image": null, "ID": 207
  },
  {
    "__metadata": { "id": "22", "uri": "http://www.whatever.com", "etag": "\"3\"", "type": "SP.Data.LinksListItem" },
    "Id": "207", "Title": "Link 03 - test category 02", "Link": "https://www.google.com",
    "Category": { "__metadata": { "type": "Collection(Edm.String)" }, "results": [ "Test Category 02" ] },
    "Image": null, "ID": 207
  },
  {
    "__metadata": { "id": "99", "uri": "http://www.whatever.com", "etag": "\"1\"", "type": "SP.Data.LinksListItem" },
    "Id": 208, "Title": "Link 02 - test category 01", "Link": "https://www.google.com",
    "Category": { "__metadata": { "type": "Collection(Edm.String)" }, "results": [ "Test Category 01" ] },
    "Image": null, "ID": 208
  },
  {
    "__metadata": { "id": "67", "uri": "http://www.whatever.com", "etag": "\"1\"", "type": "SP.Data.LinksListItem" },
    "Id": "209", "Title": "Link 01 - test category 02", "Link": "https://www.google.com",
    "Category": { "__metadata": { "type": "Collection(Edm.String)" }, "results": [ "Test Category 02" ] },
    "Image": null, "ID": "209"
  },
  {
    "__metadata": { "id": "73", "uri": "http://www.whatever.com", "etag": "\"2\"", "type": "SP.Data.LinksListItem" },
    "Id": 210, "Title": "Link 02 - test category 02 - somedmain", "Link": "https://www.somerandomdomain.com",
    "Category": { "__metadata": { "type": "Collection(Edm.String)" }, "results": [ "Test Category 05" ] },
    "Image": null, "ID": 210
  }
];

var categoryArr = [
  "Test Category 01", "Test Category 02", "Test Category 03",
  "Test Category 04", "Test Category 05", "Test Category 06"
];

var menu = $("#output2");

$.each(categoryArr, function(catIndex, category) {
  // 每次处理新分类时，重置hasLinks标记为false
  let hasLinks = false;
  
  // 创建DOM元素
  var $item = $('<div>').addClass('navContainer');
  var $title = $('<div>').addClass('title').text(category).appendTo($item);
  var $linksContainer = $('<div>').addClass('links').appendTo($item);
  var $links = $('<ul>').appendTo($linksContainer);

  // 遍历所有链接，匹配当前分类
  $.each(gLinks, function(linkIndex, link) {
    if (link.Category.results.indexOf(category) !== -1) {
      // 找到匹配的链接，添加到列表
      $('<li>').append(
        $('<a>').attr('href', link.Link).text(link.Title)
      ).appendTo($links);
      // 标记当前分类有链接
      hasLinks = true;
    }
  });

  // 如果当前分类没有任何链接，添加提示
  if (!hasLinks) {
    $('<li>').append(
      $('<a>').attr('href', "#").text("There are no links associated with this category")
    ).appendTo($links);
  }

  // 将当前分类容器添加到页面
  $item.appendTo(menu);
});

CSS #

.navContainer {
  border: 1px solid grey;
  margin: 10px;
  padding:5px;
}
.links ul li {
  list-style-type:none;
}

HTML #

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

关键修改说明 #

1. 使用hasLinks替代全局flag：把hasLinks放在每个分类的循环内部，每次处理新分类时初始化为false，确保不会受上一个分类的影响。
2. 简化链接匹配逻辑：只保留link.Category.results.indexOf(category) !== -1这个正确的判断，只要链接的分类包含当前分类，就添加链接并标记hasLinks=true。
3. 延迟添加提示：遍历完所有链接后，再检查hasLinks，如果为false才添加无关联提示，确保只有真正没有链接的分类才会显示提示。

这样修改后，你的两个问题就都解决了：有链接的分类不会再显示无链接提示，每个分类的状态都是独立的，不会出现第二次迭代错误的情况。

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