使用jQuery为匹配指定文本的h1标签添加跳转链接的方案咨询

问题原因 #

你原代码的问题主要有两点：

1. 重复遍历h1节点三次，逻辑冗余，维护成本高
2. 仅在页面初始化时根据当前文本绑定对应跳转事件，后续h1文本修改后，旧的绑定事件不会自动更新，自然无法符合预期运行

最优实现方案 #

不用监听复杂的DOM变化，只要把匹配逻辑放到点击触发时执行即可，天然支持文本变更、动态新增h1的场景，代码非常简洁：

// 统一维护文本和跳转地址的映射关系，后续新增规则直接加这里即可
const jumpMap = {
  "Google": "https://google.com/",
  "Facebook": "https://facebook.com/",
  "Instagram": "https://instagram.com/"
};

// 用事件委托绑定一次点击事件即可，所有h1都生效
$(document).on("click", "h1", function() {
  const currentText = $(this).text().trim();
  // 匹配到映射规则就跳转
  if (jumpMap[currentText]) {
    window.open(jumpMap[currentText]);
  }
});

HTML部分无需修改，正常引入jQuery即可：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Google</h1>

方案优势 #

• 全程只绑定一次事件，没有冗余的节点遍历逻辑，性能更高
• 点击时实时读取h1当前文本判断，不管后续是修改已有h1的文本，还是动态新增h1节点，都能正常适配，不用额外做其他处理
• 映射关系统一维护，后续新增/修改匹配规则只要修改jumpMap即可，维护成本极低

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