【发布时间】：2022-01-18 15:27:25
【问题描述】：
我在页面上有一个可以切换图像的滑块
<div class="custom-carousel-section">
<div class="custom-container">
<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($articleBlockImagesCount > 1)
@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
@endif
</div>
</div>
</div>
</div>
$('.img-to-select__item').click(function () {
$('.img-to-select__item').removeClass('selected');
$(this).addClass('selected');
let index = $(this).index();
$('.main-image').hide();
$('.main-image').eq(index).show();
$('.custom-carousel__title > span').html($(this).children('img').attr('data-title'));
});
当页面上只有一个这样的滑块时它可以工作，这里是一个例子
https://jsfiddle.net/a9yvdu75/
这里的代码和我的略有不同，但大体上是一样的
当页面上有两个滑块时，那么一切都不能正常工作，这里是一个例子
https://jsfiddle.net/9std8k3u/
如何解决这个问题？
我试过了
$('.img-to-select__item').click(function () {
let currentSelection = $(this);
$('.img-to-select__item').removeClass('selected');
$(currentSelection).addClass('selected');
let index = $(currentSelection).index();
$(currentSelection).closest('.img-to-select').prevAll('.main-image').hide();
$(currentSelection).closest('.img-to-select').prevAll('.main-image').eq(index).show();
$(currentSelection).closest('.img-to-select').prevAll('.custom-carousel__title > span').find('span').html($(currentSelection).children('img').attr('data-title'));
});
似乎一切正常，但是当您选择预览图片时，主图片显示的不是您需要的图片，而是相邻图片
【问题讨论】：
-
我编辑了我的答案
标签： javascript jquery laravel