使用jQuery实现动态生成链接悬停对应标记背景变色

初始结构 #

<div>
  <a id="link{{i}}">Link {{i}}</a>
</div>

<div>
  <div id="marker{{j}}">Marker {{j}}</div>
</div>

动态生成后最终结构 #

<div>
  <a id="link1">Link 1</a>
  <a id="link2">Link 2</a>
  <a id="link3">Link 3</a>
</div>

<div>
  <div id="marker1">Marker 1</div>
  <div id="marker2">Marker 2</div>
  <div id="marker3">Marker 3</div>
</div>

解决方案 #

完全可以实现，下面提供两种jQuery写法：

1. 直接绑定事件（适用于静态或已生成的元素）

$('a[id^="link"]').hover(
  // 鼠标进入时的回调
  function() {
    // 提取链接ID中的数字后缀
    const suffix = $(this).attr('id').replace('link', '');
    // 匹配对应marker并设置背景色
    $(`#marker${suffix}`).css('background-color', 'yellow');
  },
  // 鼠标离开时的回调
  function() {
    const suffix = $(this).attr('id').replace('link', '');
    // 清除背景色
    $(`#marker${suffix}`).css('background-color', '');
  }
);

2. 事件委托（适配动态生成的元素）

如果链接是后续通过JS动态添加到页面的，推荐用事件委托，确保新元素也能触发事件：

$(document).on('mouseenter', 'a[id^="link"]', function() {
  const suffix = $(this).attr('id').replace('link', '');
  $(`#marker${suffix}`).css('background-color', 'yellow');
}).on('mouseleave', 'a[id^="link"]', function() {
  const suffix = $(this).attr('id').replace('link', '');
  $(`#marker${suffix}`).css('background-color', '');
});

逻辑说明 #

• 使用属性选择器 [id^="link"] 选中所有ID以link开头的链接元素
• 通过replace方法提取ID中的数字后缀，匹配对应的marker元素
• 利用hover或mouseenter/mouseleave事件，分别在鼠标进入和离开时修改背景样式

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