點擊更改不同的圖片

Question

我有一個塊，單擊時主圖片會發生變化

 $('.img-to-select__item').click(function () { $('.img-to-select__item').removeClass('selected'); $(this).addClass('selected'); $('.main-image > img').attr('src', $(this).children('img').attr('src')); $('.custom-carousel__title > span').html($(this).children('img').attr('data-title')); });

 .custom-carousel { text-align: center; }.main-image > img { width:50px; }.img-to-select >.img-to-select__item > img { heigh: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 solid red; }

 <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> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

現在一切正常，因此當您單擊img-to-select時，它變為main-image 。 但它可以做得有點不同嗎？

假設有兩個字段main_image和preview_image ，它們完全相同，只是大小不同

假設我們有一張main-test.jpg圖片，它在main-image class 中，和完全相同的圖片，只是 class 中的preview-test.jpg test.jpg 尺寸更小img-to-select

而且有好幾張這樣的圖

main-test-1.jpg 和 preview-test-1.jpg
main-test-2.jpg 和 preview-test-2.jpg
main-test-3.jpg 和 preview-test-3.jpg
main-test-4.jpg 和 preview-test-4.jpg

代碼現在看起來像這樣

<div class="main-image">
   <img src="main-test-1.jpg" alt="" data-title="image-a">
   //The rest of the pictures are there but will be hidden until we select the desired one
   <img src="main-test-2.jpg" alt="" data-title="image-a">
   <img src="main-test-3.jpg" alt="" data-title="image-a">
   <img src="main-test-4.jpg" alt="" data-title="image-a">

</div>
<div class="img-to-select">
   <div class="img-to-select__item selected">
      <img src="preview-test-1.jpg" alt="" data-title="image-a">
   </div>
   <div class="img-to-select__item">
      <img src="preview-test-2.jpg" alt="" data-title="image-a">
   </div>
   <div class="img-to-select__item">
      <img src="preview-test-3.jpg" alt="" data-title="image-a">
   </div>
   <div class="img-to-select__item">
      <img src="preview-test-4.jpg" alt="" data-title="image-a">
   </div>

現在，當我們點擊preview-test-1.jpg時，我們會顯示main-test-1.jpg ，當我們點擊preview-test-2.jpg時，我們會顯示main-test-2.jpg等等

這可以做到嗎？

Answer 1

與您處理data-title的方式類似，您可以向定義其“主”圖像的img標簽添加另一個數據屬性，而src仍然是“預覽”圖像。

<img src="https://www.previewimage.com/" data-main-src="https://placekitten.com/201/301">

然后在 JS 中，不要拉取img的src ，而是讀取data-main-src值並將其設置為主src ：

$('.main-image > img').attr('src', $(this).children('img').data('main-src'));

 $('.img-to-select__item').click(function () { $('.img-to-select__item').removeClass('selected'); $(this).addClass('selected'); $('.main-image > img').attr('src', $(this).children('img').data('main-src')); $('.custom-carousel__title > span').html($(this).children('img').attr('data-title')); }); // trigger this on page load so the "main" image is displayed instead of the preview. $('.img-to-select__item.selected').click();

 .custom-carousel { text-align: center; }.main-image > img { width:50px; }.img-to-select >.img-to-select__item > img { heigh: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 solid red; }

 <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="" alt="" data-title=""> </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" data-main-src="https://placekitten.com/200/300"> </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" data-main-src="https://placekitten.com/201/301"> </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" data-main-src="https://placekitten.com/202/302"> </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" data-main-src="https://placekitten.com/203/303"> </div> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>