如何在jQuery中捕获动态ID？实现悬停切换对应元素显示状态

看起来你遇到的核心问题是：在动态生成的元素上绑定悬停事件时，无法正确关联到对应的目标元素——因为你原来的代码里试图直接使用image.name，但这个变量只存在于addImages函数的执行作用域中，事件触发时已经无法访问它了。

两种可行的解决方案 #

方案1：通过ID提取关联名称（依赖你的ID命名规则）

你可以从当前悬停的img元素的ID中提取出对应的image.name部分，再拼接目标元素的ID：

// 绑定鼠标进入和离开事件
$('img[id^="box-"]').mouseenter(function(){ 
  // 从当前img的ID中提取名称部分
  var targetName = $(this).attr('id').replace('box-', '');
  // 找到对应的a标签并移除hidden类
  $('#want-it-' + targetName).removeClass('hidden');
}).mouseleave(function(){
  var targetName = $(this).attr('id').replace('box-', '');
  $('#want-it-' + targetName).addClass('hidden');
});

方案2：利用DOM相邻元素关系（更健壮，不依赖ID）

因为你的img和对应的a标签是连续生成的兄弟元素，直接使用jQuery的next()方法就能获取到下一个相邻的a元素，完全不用依赖ID规则：

$('img[id^="box-"]').mouseenter(function(){ 
  $(this).next().removeClass('hidden');
}).mouseleave(function(){
  $(this).next().addClass('hidden');
});

额外优化：事件委托（适配动态新增元素） #

如果你的addImages函数会在页面加载后多次调用（动态新增元素），建议使用事件委托来绑定事件，这样新添加的元素也能触发悬停事件：

// 绑定到父元素或document，监听动态元素的事件
$(document).on('mouseenter', 'img[id^="box-"]', function(){
  $(this).next().removeClass('hidden');
}).on('mouseleave', 'img[id^="box-"]', function(){
  $(this).next().addClass('hidden');
});

为什么原来的代码无法工作？ #

你原来的代码$("#want-it-' + image.name +'"]')存在两个问题：

1. 语法错误：字符串拼接的引号使用混乱，即便修正引号，也依然无法解决核心问题；
2. 作用域问题：image.name变量只在addImages函数执行时存在，当鼠标悬停事件触发时，这个变量已经不在当前作用域中了，无法被访问。

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