jQuery实现双语对照文本对应词双向悬停高亮方法

核心实现思路 #

你之前的代码有两个核心问题：

• 选择器硬编码了.noun名词类，只能匹配名词，覆盖不到形容词、副词、动词等其他词性
• 没有读取词汇上绑定的同组数字class（.one/.two），无法匹配跨语序的对应译词，且只给希腊语列绑了事件，没有反向交互

实现核心：不管悬停哪一列的哪个词汇，先提取它对应的分组数字class，再同时给两列里所有带这个分组class的词汇加上高亮样式，鼠标移出时清除所有高亮即可，不需要区分词性。

完整实现代码 #

第一步：用CSS定义样式（比直接写内联css好维护） #

/* 给词汇加基础交互样式，选中文本更自然 */
.greek span, .eng span {
  padding: 2px 3px;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.1s ease;
  color: #000;
  background: #fff;
}
/* 高亮统一样式 */
.word-highlight {
  color: #fff !important;
  background: rgb(79,129,189) !important;
}

第二步：jQuery交互逻辑 #

这段代码同时绑定希腊语、英语两列的所有词汇悬停事件，自动识别分组，双向生效：

// 选中两列所有词汇span，统一绑定hover事件
$('.greek > span, .eng > span').hover(
  function() {
    // 拆分当前悬停元素的所有class，找到数字分组类
    const currentClasses = $(this).attr('class').split(/\s+/);
    // 匹配one、two这类分组标识，如果你有更多分组直接往数组里加就行
    const groupName = currentClasses.find(cls => ['one','two','three','four','five'].includes(cls));
    // 给两列下同组的所有词汇加高亮
    $(`.greek > .${groupName}, .eng > .${groupName}`).addClass('word-highlight');
  },
  function() {
    // 鼠标离开清除所有高亮
    $('.word-highlight').removeClass('word-highlight');
  }
)

可选优化 #

如果后续词汇分组超过预设的5个，可以把分组类匹配逻辑换成正则自动识别，不用手动维护分组列表：

// 替换上面找groupName的代码即可，自动匹配所有常用数字类名
const groupName = currentClasses.find(cls => /^(one|two|three|four|five|six|seven|eight|nine|ten|eleven|twelve|thirteen|fourteen|fifteen|sixteen|seventeen|eighteen|nineteen|twenty|hundred)$/.test(cls));

内容的提问来源于stack exchange，提问作者Tomáš Spevák