我在頁面上有一個滑塊可以切換影像
<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'));
});
似乎一切正常，但是當您選擇預覽圖片時，主圖片顯示的不是您需要的圖片，而是相鄰的圖片
uj5u.com熱心網友回復：
您需要使用 $(this) 從單擊的元素中獲取元素。
https://api.jquery.com/closest/
https://api.jquery.com/prevall/
$('.img-to-select__item').click(function () {
let currentSelection = $(this);
let imgToSelect = $(currentSelection).closest('.img-to-select');
let imgURL = $(currentSelection).find('img').attr('src');
let imgTitle = $(currentSelection).find('img').attr('data-title');
$('.img-to-select__item').removeClass('selected');
$(currentSelection).addClass('selected');
$(imgToSelect).prevAll('.main-image').find('img').attr('src', imgURL);
$(imgToSelect).prevAll('.custom-carousel__title').find('span').html(imgTitle);
// debug infos
//console.clear();
//console.log(imgURL);
//console.log(imgTitle);
});.custom-carousel {
text-align: center;
}
.main-image > img {
width:50px;
}
.img-to-select > .img-to-select__item > img {
height:30px;
width: 30px;
}
.img-to-select {
overflow: hidden;
display: flex;
justify-content:space-around;
}
.img-to-select > .img-to-select__item {
display: flex;
justify-content:space-around;
}
.img-to-select > .img-to-select__item.selected {
border: 2px
}<div class="custom-carousel-section">
<div class="custom-container">
<div class="custom-carousel">
<div class="custom-carousel__title">
<span>Title
</span>
</div>
<div class="main-image">
<img src="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" alt="" data-title="image-a">
</div>
<div class="img-to-select">
<div class="img-to-select__item selected">
<img src="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" alt="" data-title="image-a">
</div>
<div class="img-to-select__item">
<img src="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" alt="" data-title="image-b">
</div>
<div class="img-to-select__item">
<img src="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" alt="" data-title="image-c">
</div>
<div class="img-to-select__item">
<img src="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" alt="" data-title="image-d">
</div>
</div>
</div>
</div>
</div>
<div class="custom-carousel-section">
<div class="custom-container">
<div class="custom-carousel">
<div class="custom-carousel__title">
<span>Title
</span>
</div>
<div class="main-image">
<img src="https://i.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U" alt="" data-title="image-e">
</div>
<div class="img-to-select">
<div class="img-to-select__item selected">
<img src="https://i.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U" alt="" data-title="image-e">
</div>
<div class="img-to-select__item">
<img src="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" alt="" data-title="image-f">
</div>
<div class="img-to-select__item">
<img src="https://i.picsum.photos/id/67/200/300.jpg?grayscale&hmac=QQ5thxbuAGWtWAFN4RludrKCymojOtz1l6aIxAWLDSY" alt="" data-title="image-g">
</div>
<div class="img-to-select__item">
<img src="https://i.picsum.photos/id/870/200/300.jpg?blur=2&grayscale&hmac=ujRymp644uYVjdKJM7kyLDSsrqNSMVRPnGU99cKl6Vs" alt="" data-title="image-h">
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/381832.html
標籤：javascript 查询 拉拉维尔