导航链接全部指向Section 4问题排查请求（附代码）

问题描述 #

你提到已经给4个section添加了对应ID和data属性，但生成的导航链接全部指向Section 4，相关代码如下：

//选择sections列表
const sectionsList = document.querySelectorAll('.section');
//选择ul元素
const navBar = document.getElementById('navbar__list');
//将sections列表转为数组
const sectionsListArr = Array.from(sectionsList);
//遍历sections列表
for (let i = 1; i <= sectionsListArr.length; i++) {
  let text = "Section " + [i];
  let li = document.createElement('li');
  let link = document.createElement('a');
  let newText = document.createTextNode(text);
  //将li项添加到ul
  link.appendChild(newText);
  li.appendChild(link);
  navBar.appendChild(li);
  //将li项链接到对应section
  const dataAttribute1 = link.getAttribute('Section 1');
  const dataAttribute2 = link.getAttribute('Section 2');
  const dataAttribute3 = link.getAttribute('Section 3');
  const dataAttribute4 = link.getAttribute('Section 4');
  const setAttribute1 = link.setAttribute('href', '#section1');
  const setAttribute2 = link.setAttribute('href', '#section2');
  const setAttribute3 = link.setAttribute('href', '#section3');
  const setAttribute4 = link.setAttribute('href', '#section4');
}

问题根源 #

问题出在循环里的setAttribute代码块！你在每次循环中，给当前创建的link元素连续设置了4次href属性：从#section1到#section4。属性设置是覆盖式的，所以不管当前循环的i是多少，最后一次设置的#section4会覆盖掉之前所有的设置，导致每个导航链接最终的href都是#section4。

另外，你写的那几个dataAttribute变量完全没用上，而且getAttribute('Section 1')这种写法也是错误的——getAttribute需要传入属性名（比如data-section），而不是文本内容。

修复方案 #

我们可以利用循环的计数器i来动态生成对应的href值，不用重复写四次设置代码。修改后的代码如下：

//选择sections列表
const sectionsList = document.querySelectorAll('.section');
//选择ul元素
const navBar = document.getElementById('navbar__list');
//遍历sections列表（直接遍历NodeList即可，无需转数组）
for (let i = 1; i <= sectionsList.length; i++) {
  let text = `Section ${i}`; // 用模板字符串拼接更简洁
  let li = document.createElement('li');
  let link = document.createElement('a');
  
  link.textContent = text; // 直接设置文本内容，替代createTextNode写法
  // 动态匹配对应section的ID
  link.setAttribute('href', `#section${i}`);
  
  // 如果需要给链接绑定对应section的data属性，可参考下面写法
  // 假设你的section有data-section属性，值为"Section 1"这类
  // const targetSection = sectionsList[i-1];
  // link.setAttribute('data-section', targetSection.dataset.section);
  
  li.appendChild(link);
  navBar.appendChild(li);
}

额外优化提示 #

• 可以直接遍历sectionsList这个NodeList，不用转成数组；甚至可以用entries()方法同时获取索引和section元素，直接读取section的原生ID或data属性，避免依赖计数器i，代码会更健壮。
• 用link.textContent替代createTextNode的写法，能让代码更简洁易读。

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