使用<picture>标签配合JS实现响应式轮播时切换功能失效问题

你修改后切换失效的核心原因是：原有JS仅更新了<picture>标签内<img>元素的src属性，但浏览器渲染<picture>标签时会优先匹配<source>标签的媒体查询条件，使用<source>的srcset属性加载资源，仅当所有<source>都不匹配时才会回退到<img>的src，所以只改<img>的src不会触发资源更新。

第一步：修改Blade模板的缩略图节点 #

需要在预览缩略图的<img>标签上新增存储移动端图片地址的自定义属性data-mobile-src，方便点击时读取对应资源：

<div class="img-to-select">
  @if(!empty($article_block_images)) @foreach($article_block_images as $article_block_image)
  <div @if($loop->first) class="img-to-select__item  selected" @else class="img-to-select__item" @endif>
    <img 
      src="{{ $article_block_image->preview_image }}" 
      alt="{{ $article_block_image->image_alt }}" 
      title="{{ $article_block_image->image_title }}" 
      data-title="{{ $article_block_image->title }}" 
      data-main-src="{{ $article_block_image->main_image }}"
      {{-- 新增移动端图片地址属性 --}}
      data-mobile-src="{{ $article_block_image->mobile_image }}"
    >
  </div>
  @endforeach @endif
</div>

第二步：修改JS点击交互逻辑 #

点击缩略图时，同步更新<picture>内所有<source>的srcset属性，以及回退<img>的src属性即可：

$('.img-to-select__item').click(function () {
  const $selectImg = $(this).children('img');
  const mainSrc = $selectImg.data('main-src');
  const mobileSrc = $selectImg.data('mobile-src');
  const title = $selectImg.attr('data-title');

  $('.img-to-select__item').removeClass('selected');
  $(this).addClass('selected');
  
  // 同步更新picture内的所有资源地址
  const $picture = $('.main-image picture');
  $picture.find('source[media="(max-width: 576px)"]').attr('srcset', mobileSrc);
  $picture.find('source:not([media])').attr('srcset', mainSrc);
  $picture.find('img').attr('src', mainSrc);
  
  $('.custom-carousel__title > span').html(title);
});

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