如何修改Blade轮播代码实现图片块隐藏而非删除避免页面抖动

实现方案及问题解答 #

第一步：修改Blade模板 #

先调整模板逻辑，提前渲染所有主图和标题区块，非默认展示的直接加隐藏样式：

<div class="custom-carousel">
    @if(!empty($article_block_images)) 
        <!-- 渲染所有标题区块，非第一个默认隐藏 -->
        @foreach($article_block_images as $article_block_image)
        <div class="custom-carousel__title" @if(!$loop->first) style="display: none" @endif>
            <span>{{ $article_block_image->title }}</span>
        </div>
        @endforeach 

        <!-- 渲染所有主图区块，非第一个默认隐藏 -->
        @foreach($article_block_images as $article_block_image)
        <div class="main-image" @if(!$loop->first) style="display: none" @endif>
            <picture>
                <source srcset="{{ $article_block_image->mobile_image }}" media="(max-width: 576px)" alt="{{ $article_block_image->image_alt }}" title="{{ $article_block_image->image_title }}" data-title="{{ $article_block_image->title }}">
                <source srcset="{{ $article_block_image->main_image }}" alt="{{ $article_block_image->image_alt }}" title="{{ $article_block_image->image_title }}" data-title="{{ $article_block_image->title }}">
                <img src="{{ $article_block_image->main_image }}" alt="{{ $article_block_image->image_alt }}" title="{{ $article_block_image->image_title }}" data-title="{{ $article_block_image->title }}">
            </picture>
        </div>
        @endforeach 
    @endif
    <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>
</div>

第二步：修改JS逻辑 #

直接通过索引匹配缩略图和对应主图/标题，只用控制显隐即可：

$('.img-to-select__item').click(function () {
  // 切换缩略图选中状态
  $('.img-to-select__item').removeClass('selected');
  $(this).addClass('selected');
  // 获取当前点击缩略图的索引
  let index = $(this).index();
  // 隐藏所有主图和标题，只展示对应索引的内容
  $('.main-image').hide().eq(index).show();
  $('.custom-carousel__title').hide().eq(index).show();
});

问题解答 #

1. 按照上述方案先修改Blade模板提前渲染所有区块，再用JS通过索引匹配元素控制显隐即可，不需要操作DOM的增删，也不会出现重新加载导致的抖动问题。
2. 你给出的.hide()写法完全不可行。hide()和show()是jQuery提供的DOM操作方法，只能作用于已经存在于页面中的DOM元素，不能直接传入HTML字符串作为参数，该用法不符合API规范，会直接报错。
3. 不需要额外编写复杂判断条件，直接利用缩略图、主图、标题三个区块的遍历顺序一致的特性，用index()方法获取当前点击缩略图的下标，再用eq(index)匹配对应下标的主图和标题即可，所有非目标下标的元素统一隐藏，目标下标的元素展示即可。

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