点击后修改单个图片异常：jQuery代码批量替换Div内所有图片Src

我懂你的困扰——本来只想替换目标div里的某一张特定图片，结果这段jQuery代码把div里所有img的src都换掉了对吧？问题出在find("img")会匹配父div下所有img标签，执行修改时就会批量替换。要只改单张，你可以用下面几种精准定位的方式：

• 匹配第一个img元素：如果目标是div里的第一张图，用:first选择器或者.first()方法：

  // 方式1：使用:first选择器
  $(this).parent().find("img:first").attr("src", "resources/vidal/images/accordion_down.svg");
  // 方式2：使用.first()方法
  $(this).parent().find("img").first().attr("src", "resources/vidal/images/accordion_down.svg");
  

• 通过索引定位特定位置的img：如果目标是第N张（索引从0开始计数），用.eq(index)方法：

  // 示例：修改第2张图（对应索引1）
  $(this).parent().find("img").eq(1).attr("src", "resources/vidal/images/accordion_down.svg");
  

• 通过类/ID精准匹配：如果目标图片有专属的class或id，直接用更具体的选择器，这是最稳妥的方案：

  // 假设目标img带有class="accordion-toggle"
  $(this).parent().find("img.accordion-toggle").attr("src", "resources/vidal/images/accordion_down.svg");
  

补充说明：为什么原代码会替换所有图片？ #

find("img")会返回父div下所有符合条件的img元素集合，当你直接调用.attr()时，jQuery会对集合里的每一个元素都执行属性修改操作，所以才会出现所有图片被替换的情况。而上面的方法都是先把集合缩小到单个元素，再执行修改，自然就只会改动你想要的那一张了。

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