为啥我的滑块缩略图选择了错误的图像？
Posted
技术标签:
【中文标题】为啥我的滑块缩略图选择了错误的图像？【英文标题】：Why do my slider thumbnails select the wrong image?为什么我的滑块缩略图选择了错误的图像？ 【发布时间】：2022-01-18 17:55:29 【问题描述】：我在页面上有一个切换图像的滑块。几乎一切正常，图像切换，但是当我点击预览时，主图像不显示选定的图像，而是显示相邻的图像。可能是什么问题？
$('.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" 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" data-title="image-b">
</div>
<div class="img-to-select__item">
<img src="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" data-title="image-c">
</div>
<div class="img-to-select__item">
<img src="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" 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" 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" 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" 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" 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>【问题讨论】：
【参考方案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" 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" data-title="image-b">
</div>
<div class="img-to-select__item">
<img src="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" data-title="image-c">
</div>
<div class="img-to-select__item">
<img src="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" 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" 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" 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" 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" 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>【讨论】：
对不起，我还有一个问题，我可以编辑这篇文章，还是创建一个新主题更好？题目与题目不同 如果密切相关，请随意不接受和修改。否则重新开始。以上是关于为啥我的滑块缩略图选择了错误的图像？的主要内容，如果未能解决你的问题，请参考以下文章