jQuery实现LMFDB式knowl功能异常：点击链接均显示首个内容

• 检查事件绑定逻辑
  如果用document.querySelector('.knowl-link')获取链接元素，它只会返回第一个匹配项，导致后续链接未绑定点击事件。必须改用document.querySelectorAll('.knowl-link')遍历所有链接，逐个绑定事件：

  document.querySelectorAll('.knowl-link').forEach(link => {
    link.addEventListener('click', function(e) {
      e.preventDefault();
      const knowlId = this.dataset.id; // 确保链接带对应JSON键的data-id属性
      // 后续根据knowlId匹配JSON内容
    });
  });
  

• 确认链接的标识属性
  每个链接都要有唯一的data-id属性，与knowls.json中的键一一对应。示例：

  <a href="#" class="knowl-link" data-id="group-def">群定义</a>
  <a href="#" class="knowl-link" data-id="group-example">群示例</a>
  

  对应的knowls.json结构：

  {
    "group-def": "群是一个配备二元运算的集合，满足封闭性、结合律、单位元、逆元四个条件。",
    "group-example": "整数加法群(Z, +)是最基础的群实例，单位元是0，每个整数n的逆元是-n。"
  }
  

• 修正JSON内容读取逻辑
  若读取JSON后总是取第一个元素（比如Object.values(knowlsData)[0]），会导致所有链接显示同一内容。需根据点击链接的data-id匹配对应值：

  fetch('knowls.json')
    .then(res => res.json())
    .then(data => {
      document.querySelectorAll('.knowl-link').forEach(link => {
        link.addEventListener('click', function(e) {
          e.preventDefault();
          const targetId = this.dataset.id;
          const content = data[targetId];
          if (content) {
            document.getElementById('knowl-display').innerHTML = content;
          }
        });
      });
    });
  

• 排查循环绑定的闭包问题
  若用for循环绑定事件，注意变量作用域。旧写法会因var的函数级作用域导致取错ID：

  // 错误写法
  const links = document.querySelectorAll('.knowl-link');
  for (var i = 0; i < links.length; i++) {
    links[i].addEventListener('click', function() {
      const id = links[i].dataset.id; // i最终等于links.length，会报错
    });
  }
  

  解决方法是用let声明循环变量（块级作用域）：

  // 正确写法
  for (let i = 0; i < links.length; i++) {
    links[i].addEventListener('click', function() {
      const id = links[i].dataset.id;
    });
  }
  

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