jQuery动态传递ID至find选择器修改图片失效问题咨询

我来帮你拆解这个问题，你遇到的情况其实是两个小细节导致的，咱们一步步理清楚：

问题场景回顾 #

你在用Bootstrap的折叠面板组件，想在面板展开/收起时切换对应的箭头图标，尝试动态生成选择器修改图片src时失效，但硬编码图片ID就能正常工作，而且页面的HTML是通过Java自定义标签循环生成的带唯一ID的img元素。

核心原因分析 #

1. 变量作用域问题：你在shown.bs.collapse事件回调里定义的crid是局部变量，到了后面的hidden.bs.collapse回调里根本访问不到！所以收起事件里的$(this).parent().find(crid)其实是在查询一个undefined的选择器，自然找不到目标元素。
2. 冗余的DOM查询：你已经通过$(this).parent().find("img")拿到了目标img的jQuery对象，完全没必要再拼接ID选择器重新查询一次，多此一举还容易引入错误。

解决方案 #

最简洁的方式是直接在两个事件回调里，基于当前触发事件的折叠面板元素，直接定位到对应的img，或者提前缓存元素避免重复查询。这里提供两种实用写法：

写法一：简洁直接版（推荐） #

利用每个事件回调里的this都是当前触发的.collapse元素，直接在各自回调里定位img：

$('.vd-accordion-grid .collapse').on('shown.bs.collapse', function() {
    // 直接找到当前折叠面板对应的img并修改src
    $(this).parent().find("img").attr("src", "resources/vidal/images/accordion_down.svg");
}).on('hidden.bs.collapse', function() {
    // 同样的方式定位img修改回原图标
    $(this).parent().find("img").attr("src", "resources/vidal/images/accordion_right.svg");
});

写法二：缓存元素版（适合复杂场景） #

如果担心重复DOM查询影响性能，可以把目标img元素缓存起来，通过jQuery的data()方法绑定到当前折叠面板元素上：

$('.vd-accordion-grid .collapse').on('shown.bs.collapse', function() {
    var $targetImg = $(this).parent().find("img");
    $targetImg.attr("src", "resources/vidal/images/accordion_down.svg");
    // 将img元素绑定到当前collapse元素上
    $(this).data('targetImg', $targetImg);
}).on('hidden.bs.collapse', function() {
    // 取出之前缓存的img元素
    var $targetImg = $(this).data('targetImg');
    $targetImg.attr("src", "resources/vidal/images/accordion_right.svg");
});

为什么硬编码ID能生效？ #

硬编码时你写了明确的img#picid0选择器，不存在变量未定义的问题，DOM能精准找到目标元素并修改src；而动态拼接时，由于作用域限制，收起事件里的crid是undefined，导致选择器无效，自然修改不了图片。

额外优化建议 #

如果父元素下存在多个img元素，你可以用更精准的选择器匹配Java生成的ID前缀，避免误修改其他图片：

// 匹配所有ID以picid开头的img元素
$(this).parent().find("img[id^='picid']")

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