如何使用JavaScript简化重复的DOM元素点击跳转代码？

你当前的代码存在大量重复逻辑：每一个分类卡片都重复执行「获取DOM元素→定义独立跳转函数→绑定点击事件」操作，这类重复逻辑完全可以通过配置化+循环批量处理实现，功能完全和原有代码一致。

方案1：配置映射批量绑定（最兼容现有HTML结构） #

不需要修改你现有HTML的ID属性，只需要把所有ID和对应跳转路径整理成配置数组，循环完成事件绑定即可，代码如下：

// 基础路径统一维护，后续域名/路径前缀修改只需要改这一处
const BASE_MENU_URL = "https://jikan.es/menu/";
// 配置所有菜单项：元素ID + 对应跳转的路径后缀
const menuList = [
  { eleId: "entradas", path: "entradas" },
  { eleId: "veggie", path: "veggie" },
  { eleId: "rolls-especiales", path: "especiales" }, // 注意这个项ID和路径不一致，单独配置
  { eleId: "poke-bowls", path: "poke-bowls" },
  { eleId: "sashimi-niguiris", path: "sashimi-niguiris" },
  { eleId: "combinados", path: "combinados" },
  { eleId: "rolls-clasicos", path: "rolls-clasicos" },
  { eleId: "rolls-signature", path: "rolls-signature" },
  { eleId: "promociones", path: "promociones" }
];

// 批量绑定事件
menuList.forEach(menuItem => {
  const element = document.getElementById(menuItem.eleId);
  // 增加元素存在判断，避免某个ID写错/不存在时整段JS报错
  if (element) {
    element.addEventListener("click", () => {
      window.location.href = BASE_MENU_URL + menuItem.path;
    });
  }
});

方案2：通用类名绑定（后续维护成本最低） #

如果你可以修改HTML结构，推荐给所有可点击的分类DIV加上统一的类名，比如class="menu-card"，后续新增菜单项不需要修改JS代码，只要类名、ID和路径规则匹配就自动生效：

const BASE_MENU_URL = "https://jikan.es/menu/";
// 只需要配置ID和路径不一致的特殊项即可
const specialPathMap = {
  "rolls-especiales": "especiales"
};

// 选中所有带menu-card类名的菜单项批量绑定
document.querySelectorAll(".menu-card").forEach(card => {
  card.addEventListener("click", () => {
    // 优先取特殊映射的路径，没有特殊配置就直接用元素ID当路径
    const targetPath = specialPathMap[card.id] || card.id;
    window.location.href = BASE_MENU_URL + targetPath;
  });
});

优化点说明 #

• 代码量从原来的近60行压缩到20行左右，完全消除重复逻辑
• 统一维护基础路径，后续如果站点路径调整只需要修改一处
• 增加了元素存在性校验，不会因为单个元素ID写错导致整段JS失效
• 不需要定义irUrl1到irUrl99个零散的全局函数，减少全局变量污染
• 后续新增/删除/修改菜单项只需要调整配置，不需要重复写绑定逻辑

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