單擊更改不同的圖片-有解無憂

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

$('.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_imageand preview_image，它們將完全相同，唯一的大小不同

假設我們有一張main-test.jpg圖片，它在main-image類中，并且完全相同的圖片，只是preview-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 >
   <div >
      <img src="preview-test-1.jpg" alt="單擊更改不同的圖片" data-title="image-a">
   </div>
   <div >
      <img src="preview-test-2.jpg" alt="單擊更改不同的圖片" data-title="image-a">
   </div>
   <div >
      <img src="preview-test-3.jpg" alt="單擊更改不同的圖片" data-title="image-a">
   </div>
   <div >
      <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等等

這能做到嗎？

uj5u.com熱心網友回復：

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

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

然后，在JS的，而不是拉動src的img，閱讀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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/360159.html

標籤：javascript 查询

上一篇：從陣列陣列創建物件陣列

下一篇：Javascript回圈遍歷JSON，按出現順序組合日期/時間