如何简化重复代码，动态修改#nav-link的文本与href属性？

当然有办法简化，核心是把重复的逻辑抽离，用配置映射+统一处理的方式来避免冗余代码：

步骤1：定义配置映射 #

先把每个URL关键词对应的文本和路径统一存到一个数组里，方便管理：

// 路由配置映射：关键词 → 显示文本、目标路径
const navConfigs = [
  { key: 'colors', text: 'Colors', href: '/colors' },
  { key: 'cars', text: 'Cars', href: '/cars' },
  { key: 'people', text: 'People', href: '/people' }
];

步骤2：统一匹配并设置属性 #

遍历配置数组，找到匹配当前URL的项，然后一次性设置元素的文本和href：

const currentUrl = window.location.href;
// 找到匹配当前URL的配置项（用includes比indexOf更直观）
const matched = navConfigs.find(item => currentUrl.includes(item.key));

if (matched) {
  $('#nav-link').text(matched.text).attr('href', matched.href);
}

为什么这么做？ #

• 可维护性高：以后要加新的路由规则，直接在navConfigs里加新对象就行，不用写新的else if分支
• 减少冗余：只写一次DOM操作代码，避免重复编写$('#nav-link').text().attr()
• 结构清晰：数据和逻辑分离，一眼就能看懂所有路由对应关系

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