如何优化WordPress菜单的jQuery悬停关联代码，避免重复编写

我在WordPress后台为菜单的每个链接添加了.custom-class-n类，生成的菜单结构如下：

<ul>
  <li id="menu-item-227" class="custom-class-1 menu-item ..."></li>
  <li id="menu-item-228" class="custom-class-2 menu-item ..."></li>
  ...
  <li id="menu-item-n" class="custom-class-n menu-item ..."></li>
</ul>

同时有对应的镜像列表结构：

<div>
  <p class="custom-class-1"></p>
  <p class="custom-class-2"></p>
  ...
  <p class="custom-class-n"></p>
</div>

需要实现的效果：鼠标悬停在带.custom-class-n的<li>上时，对应的<p.custom-class-n>添加hover类；鼠标离开时移除该类。目前单个类的jQuery代码可正常运行，但需要为每个.custom-class-n重复编写，代码冗余，现需要编写通用代码，无需逐个复制粘贴（注：.custom-class-n始终是<li>的第一个类）。

通用解决方案代码 #

jQuery(document).ready(function($) {
  // 匹配所有以custom-class-开头的li元素，绑定悬停事件
  $('li[class^="custom-class-"]').on('mouseenter mouseleave', function(e) {
    // 获取当前li的第一个类（即目标custom-class-n）
    const targetCustomClass = $(this).attr('class').split(' ')[0];
    // 根据事件类型切换hover类：mouseenter添加，mouseleave移除
    $('p.' + targetCustomClass).toggleClass('hover', e.type === 'mouseenter');
  });
});

代码说明 #

• 选择器优化：使用属性前缀选择器li[class^="custom-class-"]，一次性匹配所有符合规则的菜单<li>，无需逐个指定类名
• 事件合并：同时绑定mouseenter和mouseleave事件，通过事件对象e的type属性判断当前事件类型
• 获取目标类：利用split(' ')[0]拆分<li>的class属性，直接取第一个类（符合题目中.custom-class-n是第一个类的前提）
• 简化类操作：使用toggleClass的第二个参数，实现根据事件类型自动添加/移除hover类，减少冗余代码

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