我有一個小滑塊，可以將預覽影像切換到主影像。現在作業正常
刀片.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()and.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()
uj5u.com熱心網友回復：
將您的觀點更改為：
<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 來找到合適的元素并顯示它
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/370067.html
標籤：javascript 查询 拉拉维尔