jQuery For循环动态拼接类名实现单元格Hover高亮失效问题求助

嘿，我刚好碰到过类似的问题，来帮你搞定这个悬停高亮的bug！

问题复盘 #

你基于MySQL数据生成了表格，想要实现鼠标悬停时高亮所有同ID的单元格，用jQuery写的脚本大部分逻辑都正常，但动态拼接类名的代码var nr = '.id_' + i;完全失效；可如果把类名写死成静态值（比如var nr = '.id_2';），功能就立马正常运行。

为啥会出这问题？ #

核心原因是循环绑定事件时的变量作用域坑：当你在循环里用变量i拼接类名并绑定hover事件时，事件触发的时候循环早就跑完了，i的值已经变成循环的最终数值，导致拼接出来的类名根本不是你当前悬停元素对应的ID，自然就没效果啦。

搞定它的方案 #

我们换个思路，别依赖循环里的i了，直接从当前悬停的元素身上提取对应的ID值，再去匹配类名就行。修正后的完整代码如下：

<!-- 示例表格结构（和你生成的结构一致即可） -->
<table>
  <tr>
    <td class="id_1">ID1内容</td>
    <td class="id_2">ID2内容</td>
    <td class="id_1">ID1内容</td>
  </tr>
  <tr>
    <td class="id_3">ID3内容</td>
    <td class="id_1">ID1内容</td>
    <td class="id_2">ID2内容</td>
  </tr>
</table>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  // 选中所有类名以id_开头的单元格，绑定hover事件
  $('[class^="id_"]').hover(
    // 鼠标移入时的操作
    function(){
      // 从当前元素类名里提取ID数字
      var targetId = $(this).attr('class').match(/id_(\d+)/)[1];
      var targetClass = `.id_${targetId}`;
      // 给所有同ID的单元格加高亮样式
      $(targetClass).addClass('highlight');
    },
    // 鼠标移出时的操作
    function(){
      var targetId = $(this).attr('class').match(/id_(\d+)/)[1];
      var targetClass = `.id_${targetId}`;
      // 移除高亮样式
      $(targetClass).removeClass('highlight');
    }
  );
});
</script>

<style>
/* 高亮样式，你可以按需修改 */
.highlight { background-color: #ffeb3b; }
td { padding: 10px; border: 1px solid #eee; }
</style>

为啥这么改就好使？ #

1. 用选择器$('[class^="id_"]')直接选中所有符合类名规则的单元格，不用再写循环遍历，省事儿还避免了作用域问题。
2. 通过正则match(/id_(\d+)/)从当前元素的类名里精准提取ID数字，完全不依赖循环变量，从根源上解决了拼接错误的问题。
3. 动态拼接目标类名后，添加/移除高亮样式，完美实现悬停时同ID单元格一起高亮的效果。

这样修改后，不管你的表格有多少行多少列，只要单元格类名是id_数字的格式，就能稳稳实现你想要的功能啦！

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