隐藏块而不是删除

Question

我有一个小滑块，可以将预览图像切换到主图像。现在可以正常使用了

blade.php

<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)
        <span>{{ $article_block_image->title }}</span> @endif
    </div>
    @endforeach @endif @if(!empty($article_block_images)) @foreach($article_block_images as $article_block_image)
    <div class="main-image">
        @if($loop->first)
        <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>
        @endif
    </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 mainSrc = $(this).children('img').data('main-src')
  let mobileSrc = $(this).children('img').data('mobile-src')
  let title = $(this).children('img').attr('title')
  let alt = $(this).children('img').attr('alt')
  $('.main-image > picture').html(`
    <source srcset="${mobileSrc}" media="(max-width: 576px)" alt="${alt}" title="${title}">
    <source srcset="${mainSrc}" alt="${alt}" title="${title}">
    <img src="${mainSrc}" alt="${alt}" title="${title}">
  `);
  $('.custom-carousel__title > span').html($(this).children('img').attr('data-title'));
});

但现在的问题是，当我切换图像时，所有的块都被删除了，然后它们似乎又被加载回来了，因此页面上的所有内容都在抽搐，无法按我们的意愿工作

是否有可能做一些事情，以便立即加载这些块，并在切换不必要的块时隐藏，并显示必要的块？

如果我添加 style="display: none" 那么我需要如何重新编写脚本，以便所有内容都被隐藏和显示，而不是删除和重新打开

如果我使用.hide() 和.show() 而不是.html() 是否有效？

像这样

.hide(`
    <source srcset="${mobileSrc}" media="(max-width: 576px)" alt="${alt}" title="${title}">
    <source srcset="${mainSrc}" alt="${alt}" title="${title}">
    <img src="${mainSrc}" alt="${alt}" title="${title}">
  `)

当使用.hide()和.show()时，这里的检查条件应该是什么

Answer 1

改变你的观点：

<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)
        <span>{{ $article_block_image->title }}</span> @endif
    </div>
    @endforeach @endif @if(!empty($article_block_images)) @foreach($article_block_images as $article_block_image)
    <div class="main-image" style="display: {{ $loop->first?'block':'none'}}">
        <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(); // I think
  $('.main-image').hide();
  $('.main-image').eq(index).show();
  $('.custom-carousel__title > span').html($(this).children('img').attr('data-title'));
});

想法是代替替换元素的HTML来找到合适的元素并显示它