为什么我的滑块缩略图选择了错误的图像

Question

我在页面上有一个切换图像的滑块。一切都很正常，图像会切换，但当我点击预览时，主图像不会显示选定的图像，而是显示相邻的图像。可能是什么问题？

$('.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').find('span').html($(currentSelection).children('img').attr('data-title'));
});

.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" style="display: block">
<picture>
<source srcset="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" media="(max-width: 576px)" data-title="image-a">
<source srcset="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" data-title="image-a">
<img src="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" data-title="image-a">
</picture>
</div>
<div class="main-image" style="display: none">
<picture>
<source srcset="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" media="(max-width: 576px)" data-title="image-b">
<source srcset="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" data-title="image-b">
<img src="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" data-title="image-b">
</picture>
</div>
<div class="main-image" style="display: none">
<picture>
<source srcset="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" media="(max-width: 576px)" data-title="image-c">
<source srcset="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" data-title="image-c">
<img src="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" data-title="image-c">
</picture>
</div>
<div class="main-image" style="display: none">
<picture>
<source srcset="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" media="(max-width: 576px)" data-title="image-d">
<source srcset="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" data-title="image-d">
<img src="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" data-title="image-d">
</picture>
</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>
<hr>
<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" style="display: block">
<picture>
<source srcset="https://i.picsum.photos/id/295/200/300.jpg?hmac=b6Ets6Bu47pFHcU4UK7lI6xYkfy48orifVzWeHAe0zM" media="(max-width: 576px)" data-title="image-a">
<source srcset="https://i.picsum.photos/id/295/200/300.jpg?hmac=b6Ets6Bu47pFHcU4UK7lI6xYkfy48orifVzWeHAe0zM" data-title="image-a">
<img src="https://i.picsum.photos/id/295/200/300.jpg?hmac=b6Ets6Bu47pFHcU4UK7lI6xYkfy48orifVzWeHAe0zM" data-title="image-a">
</picture>
</div>
<div class="main-image" style="display: none">
<picture>
<source srcset="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" media="(max-width: 576px)" data-title="image-b">
<source srcset="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" data-title="image-b">
<img src="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" data-title="image-b">
</picture>
</div>
<div class="main-image" style="display: none">
<picture>
<source srcset="https://i.picsum.photos/id/67/200/300.jpg?grayscale&hmac=QQ5thxbuAGWtWAFN4RludrKCymojOtz1l6aIxAWLDSY" media="(max-width: 576px)" data-title="image-c">
<source srcset="https://i.picsum.photos/id/67/200/300.jpg?grayscale&hmac=QQ5thxbuAGWtWAFN4RludrKCymojOtz1l6aIxAWLDSY" data-title="image-c">
<img src="https://i.picsum.photos/id/67/200/300.jpg?grayscale&hmac=QQ5thxbuAGWtWAFN4RludrKCymojOtz1l6aIxAWLDSY" data-title="image-c">
</picture>
</div>
<div class="main-image" style="display: none">
<picture>
<source srcset="https://i.picsum.photos/id/870/200/300.jpg?blur=2&grayscale&hmac=ujRymp644uYVjdKJM7kyLDSsrqNSMVRPnGU99cKl6Vs" media="(max-width: 576px)" data-title="image-d">
<source srcset="https://i.picsum.photos/id/870/200/300.jpg?blur=2&grayscale&hmac=ujRymp644uYVjdKJM7kyLDSsrqNSMVRPnGU99cKl6Vs" data-title="image-d">
<img src="https://i.picsum.photos/id/870/200/300.jpg?blur=2&grayscale&hmac=ujRymp644uYVjdKJM7kyLDSsrqNSMVRPnGU99cKl6Vs" data-title="image-d">
</picture>
</div>
<div class="img-to-select">
<div class="img-to-select__item selected">
<img src="https://i.picsum.photos/id/295/200/300.jpg?hmac=b6Ets6Bu47pFHcU4UK7lI6xYkfy48orifVzWeHAe0zM" alt="" data-title="image-a">
</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-b">
</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-c">
</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-d">
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

我刚刚更新了您的主图像选择器以简化。prevAll()函数获取先前的同级函数，这是不必要的特定函数。我们只希望所有元素都在父容器中。

$('.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('.custom-carousel').find('.main-image').eq(index).show();
$(currentSelection).closest('.img-to-select')
.prevAll('.custom-carousel__title').find('span')
.html($(currentSelection).children('img').attr('data-title'));
});

.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" style="display: block">
<picture>
<source srcset="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" media="(max-width: 576px)" data-title="image-a">
<source srcset="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" data-title="image-a">
<img src="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" data-title="image-a">
</picture>
</div>
<div class="main-image" style="display: none">
<picture>
<source srcset="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" media="(max-width: 576px)" data-title="image-b">
<source srcset="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" data-title="image-b">
<img src="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" data-title="image-b">
</picture>
</div>
<div class="main-image" style="display: none">
<picture>
<source srcset="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" media="(max-width: 576px)" data-title="image-c">
<source srcset="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" data-title="image-c">
<img src="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" data-title="image-c">
</picture>
</div>
<div class="main-image" style="display: none">
<picture>
<source srcset="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" media="(max-width: 576px)" data-title="image-d">
<source srcset="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" data-title="image-d">
<img src="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" data-title="image-d">
</picture>
</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>
<hr>
<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" style="display: block">
<picture>
<source srcset="https://i.picsum.photos/id/295/200/300.jpg?hmac=b6Ets6Bu47pFHcU4UK7lI6xYkfy48orifVzWeHAe0zM" media="(max-width: 576px)" data-title="image-a">
<source srcset="https://i.picsum.photos/id/295/200/300.jpg?hmac=b6Ets6Bu47pFHcU4UK7lI6xYkfy48orifVzWeHAe0zM" data-title="image-a">
<img src="https://i.picsum.photos/id/295/200/300.jpg?hmac=b6Ets6Bu47pFHcU4UK7lI6xYkfy48orifVzWeHAe0zM" data-title="image-a">
</picture>
</div>
<div class="main-image" style="display: none">
<picture>
<source srcset="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" media="(max-width: 576px)" data-title="image-b">
<source srcset="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" data-title="image-b">
<img src="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" data-title="image-b">
</picture>
</div>
<div class="main-image" style="display: none">
<picture>
<source srcset="https://i.picsum.photos/id/67/200/300.jpg?grayscale&hmac=QQ5thxbuAGWtWAFN4RludrKCymojOtz1l6aIxAWLDSY" media="(max-width: 576px)" data-title="image-c">
<source srcset="https://i.picsum.photos/id/67/200/300.jpg?grayscale&hmac=QQ5thxbuAGWtWAFN4RludrKCymojOtz1l6aIxAWLDSY" data-title="image-c">
<img src="https://i.picsum.photos/id/67/200/300.jpg?grayscale&hmac=QQ5thxbuAGWtWAFN4RludrKCymojOtz1l6aIxAWLDSY" data-title="image-c">
</picture>
</div>
<div class="main-image" style="display: none">
<picture>
<source srcset="https://i.picsum.photos/id/870/200/300.jpg?blur=2&grayscale&hmac=ujRymp644uYVjdKJM7kyLDSsrqNSMVRPnGU99cKl6Vs" media="(max-width: 576px)" data-title="image-d">
<source srcset="https://i.picsum.photos/id/870/200/300.jpg?blur=2&grayscale&hmac=ujRymp644uYVjdKJM7kyLDSsrqNSMVRPnGU99cKl6Vs" data-title="image-d">
<img src="https://i.picsum.photos/id/870/200/300.jpg?blur=2&grayscale&hmac=ujRymp644uYVjdKJM7kyLDSsrqNSMVRPnGU99cKl6Vs" data-title="image-d">
</picture>
</div>
<div class="img-to-select">
<div class="img-to-select__item selected">
<img src="https://i.picsum.photos/id/295/200/300.jpg?hmac=b6Ets6Bu47pFHcU4UK7lI6xYkfy48orifVzWeHAe0zM" alt="" data-title="image-a">
</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-b">
</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-c">
</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-d">
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>