JS如何选中类名以数字结尾的元素实现hover对应显示内容效果

问题排查 #

你当前的代码存在两个核心问题：

1. 没有对icon和box的编号做匹配逻辑，hover任意cr-icon都会统一修改所有cr-box元素的透明度，无法实现对应编号的联动效果
2. 缺少对当前hover元素编号的提取步骤，无法精准定位到要显示的目标box

解决方案 #

修正后JS代码 #

// 初始化所有cr-box为隐藏状态
$('[class^="cr-box"]').css("opacity", "0");

$('[class^="cr-icon"]').hover(function() {
  // 提取当前hover icon的数字编号
  const iconNum = $(this).attr('class').match(/cr-icon-(\d+)/)[1];
  // 仅显示对应编号的box
  $(`.cr-box-${iconNum}`).css("opacity", "1");
}, function() {
  // 鼠标离开时隐藏对应编号的box
  const iconNum = $(this).attr('class').match(/cr-icon-(\d+)/)[1];
  $(`.cr-box-${iconNum}`).css("opacity", "0");
});

优化建议 #

• 若需要平滑的显隐过渡效果，可补充CSS规则：

  .cr-wrap [class^="cr-box"] {
    transition: opacity 0.25s ease;
  }
  

• 若元素class可能存在其他类名干扰匹配，可给icon新增自定义属性存编号，匹配稳定性更高：

  <!-- html部分给path加自定义属性 -->
  <path class="cr-icon-1" data-num="1">icon main image</path>
  

  对应JS提取编号逻辑修改为：

  const iconNum = $(this).data('num');
  

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