jQuery点击缩略图切换主图添加fade动画后始终加载相同图片问题

问题原因 #

• 错误代码中fadeOut的回调函数内使用$('#thumbs img').attr('src')获取地址，该选择器会匹配所有缩略图，默认只返回第一个缩略图的src，因此无论点击哪个缩略图最终都会加载第一张对应的主图。
• fadeOut回调函数内的this指向已经变更为#mainImage元素，无法直接通过$(this)获取被点击的缩略图属性。

修复方案 #

在点击事件触发时先将被点击缩略图对应的主图地址存入变量，在动画回调中直接调用该变量即可，修复后代码如下：

<script>
  $("#thumbs img").click(function() {
      // 提前存储当前点击的缩略图对应的主图地址
      const targetSrc = $(this).attr('src').replace('thumbnails','ovado').replace('png','jpg');
      $("#mainImage").fadeOut(1000, function() {
          // 回调中直接使用预存的地址赋值即可
          $("#mainImage").attr('src', targetSrc);
      }).fadeIn(1000);
      return false;
  });
</script>

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