隐藏块而不是删除

Posted 2023-05-07

【中文标题】隐藏块而不是删除

【英文标题】：Hide blocks instead of deleting

【发布时间】：2022-01-07 01:54:13

【问题描述】：

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

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)"  title=" $article_block_image->image_title " data-title=" $article_block_image->title ">
            <source srcset=" $article_block_image->main_image "  title=" $article_block_image->image_title " data-title=" $article_block_image->title ">
            <img src=" $article_block_image->main_image "  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 "  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)"  title="$title">
    <source srcset="$mainSrc"  title="$title">
    <img src="$mainSrc"  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)"  title="$title">
    <source srcset="$mainSrc"  title="$title">
    <img src="$mainSrc"  title="$title">
  `)

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

【问题讨论】：

老实说，我没有看到一个简单的改变可以实现这一点。这段代码似乎非常锁定在每次点击时替换 HTML 的方法。您需要从顶部再看一遍。

@apokryfos 那么有哪些选择呢？这样每次点击都不会重新加载所有内容？

当你渲染你的页面时，加载所有的图片，但是那些不应该被选中的应该有一个style="display: none"，那么你可以在当前可见的图片上使用.hide()，在当前可见的图片上使用.show()你想在之后展示。我认为加载时间会更长，因为所有内容都会在开始时加载，但用户可能不会注意到，因为 HTML 将在图像之前加载，并且应该首先加载可见图像

@apokryfos 也就是说，我基本上需要删除@if($loop->first)，但是我应该怎么做才能自动显示第一张图片

是的，您可以使用<div class="main-image" style="display: $loop->first ? 'block' : 'none' ">，但是您需要找到正确的图像以显示在您的 JS 中

【参考方案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)"  title=" $article_block_image->image_title " data-title=" $article_block_image->title ">
            <source srcset=" $article_block_image->main_image "  title=" $article_block_image->image_title " data-title=" $article_block_image->title ">
            <img src=" $article_block_image->main_image "  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 "  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来找到合适的元素并显示它

【讨论】：

似乎一切正常，切换图片时也没有闪退和下载，非常感谢帮助）