如何将两个jQuery hover函数合并为一个通用处理函数？

完全没必要重复写相同逻辑的hover绑定，我们可以通过动态提取元素标识的方式，写出一套通用代码适配所有同格式的元素对。

实现思路 #

核心就是利用触发元素的ID（比如1A、1B），动态拼接出对应的目标类名（.route1A、.route1B），这样不管有多少组这样的元素，都能复用同一段逻辑。

具体实现方式 #

方式1：给触发元素加统一类（推荐）

先给所有需要触发hover效果的元素加一个共同的类，比如route-trigger，这样可以更精准地选择目标元素：

<!-- 触发元素 -->
<div id="1A" class="route-trigger">鼠标悬停我</div>
<div id="1B" class="route-trigger">鼠标悬停我</div>

<!-- 目标元素 -->
<div class="route1A">我会显示/隐藏</div>
<div class="route1B">我会显示/隐藏</div>

然后写通用的jQuery代码：

$(".route-trigger").hover(function() {
  // 获取当前悬停元素的ID（比如"1A"）
  const targetId = this.id;
  // 动态拼接目标类选择器，然后执行fadeToggle
  $(`.route${targetId}`).stop().fadeToggle(500);
});

方式2：通过ID前缀选择器（无需额外加类）

如果不想修改HTML加类，也可以用属性选择器选择所有ID以特定字符开头的元素（比如你的ID都是1开头）：

$("[id^='1']").hover(function() {
  const targetId = this.id;
  $(`.route${targetId}`).stop().fadeToggle(500);
});

扩展说明 #

如果你的ID格式更复杂（比如trigger-1A），只需要调整标识的提取逻辑就行，比如用字符串分割：

// 假设ID是"trigger-1A"，提取后面的"1A"
const targetId = this.id.split('-').pop();

这样不管你的标识规则怎么变，只要能从ID里提取出对应类名的后缀，就能复用这套逻辑啦！

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