JS圖片庫僅更改為最后一張圖片

我正在構建一個香草 JS 影像庫。超級簡單的東西。到目前為止，我已經能夠通過單擊下面的其中一個縮略圖來更改主顯示影像，但是它會更改為縮略圖的第四個（也是最后一個）影像并保持不變。

我正在嘗試使用資料集來存盤每個縮略圖的 URL 并在以后訪問它。

我最好的猜測是我的 for 回圈縮略圖影像有問題。我認為正在發生的事情是我只是獲取縮略圖的總數（在本例中為 4）并回傳該值。這就是為什么無論您單擊哪個縮略圖，它都會不斷更改為第四張影像。

我會發布一個小提琴，但這是我到目前為止的代碼：

HTML

<section id="showcase">
  <div id="display-area">
    <img src="https://source.unsplash.com/wtGWZbiDhGc" id="display-image" alt="unpicked oranges on a tree" />
  </div>
  
  <ul id="thumbnails">
    <li class="thumbnail">
      <img src="https://source.unsplash.com/wtGWZbiDhGc" alt="" class="thumb-img" data-thumbsrc="https://source.unsplash.com/wtGWZbiDhGc"/>
    </li>
    <li class="thumbnail">
      <img src="https://source.unsplash.com/gKR4mOceulU" alt="" class="thumb-img" data-thumbsrc="https://source.unsplash.com/gKR4mOceulU"/>
    </li>
    <li class="thumbnail">
      <img src="https://source.unsplash.com/Jz4QMhLvGgw" alt="" class="thumb-img" data-thumbsrc="https://source.unsplash.com/Jz4QMhLvGgw"/>
    </li>
    <li class="thumbnail">
      <img src="https://source.unsplash.com/I7dpBg-Z5Cc" alt="" class="thumb-img"data-thumbsrc="https://source.unsplash.com/I7dpBg-Z5Cc"/>
    </li>
  </ul>
  
  
</section>

JS

const thumbnail = document.querySelectorAll('.thumbnail');

thumbnail.forEach(function(thumb){
    thumb.addEventListener("click", changeImage);
});


  // elements

  const displayArea = document.querySelector('#display-area');
  let displaysrc = document.querySelector('#display-image'); //  the display image's img tag
  let thumbImg = document.querySelectorAll('.thumb-img'); // all img elements w/ thumb-img class
 
  

  function changeImage(){

    // check current value of display image src
    console.log("current display src "   displaysrc.src); 

    for (var i = 0; i < thumbImg.length; i  ){

      let thumbsrc = thumbImg[i].dataset.thumbsrc;
      
      displaysrc.setAttribute('src', thumbsrc);

    }

    // check new value of display image src
     console.log("new display src "   displaysrc.src); 
};

小提琴：https ://jsfiddle.net/Lutcyp5w/

如果您需要更多資訊，請告訴我。謝謝！

uj5u.com熱心網友回復：

您應該在事件處理程式中以某種方式參考this（即目標元素）以識別被單擊的正確元素。嘗試this：

let thumbsrc = this.querySelector(".thumb-img").dataset.thumbsrc;

uj5u.com熱心網友回復：

您可以使用獲取單擊的元素event.target，然后訪問該元素的資料集以將其分配給 .src 的 src 屬性displaysrc。見片段

const thumbnail = document.querySelectorAll('.thumbnail');
const displayArea = document.querySelector('#display-area');
let displaysrc = document.querySelector('#display-image'); //  the display image's img tag
let thumbImg = document.querySelectorAll('.thumb-img'); // all img elements w/ thumb-img class

thumbnail.forEach(function(thumb) {
  thumb.addEventListener("click", (event) => displaysrc.setAttribute('src', event.target.dataset.thumbsrc));
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100vh;
}

#showcase {
  width: 100%;
  max-width: 1024px;
  margin: 3% auto 0 auto;
}

#display-area {
  max-width: 1024px;
  height: 550px;
  margin-bottom: 3%;
}

#display-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

#thumbnails {
  list-style-type: none;
  display: flex;
  gap: 1%;
  cursor: pointer;
}

.thumbnail {
  width: 100%;
  max-width: 350px;
  height: 200px;
}

.thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

<section id="showcase">
  <div id="display-area">
    <img src="https://source.unsplash.com/wtGWZbiDhGc" id="display-image" alt="unpicked oranges on a tree" />
  </div>

  <ul id="thumbnails">
    <li class="thumbnail">
      <img src="https://source.unsplash.com/wtGWZbiDhGc" alt="unpicked oranges on a tree" class="thumb-img" data-thumbsrc="https://source.unsplash.com/wtGWZbiDhGc" />
    </li>
    <li class="thumbnail">
      <img src="https://source.unsplash.com/gKR4mOceulU" alt="woman standing in front of a blue background with a refracted rainbow of light on her face. " class="thumb-img" data-thumbsrc="https://source.unsplash.com/gKR4mOceulU" />
    </li>
    <li class="thumbnail">
      <img src="https://source.unsplash.com/Jz4QMhLvGgw" alt="sushi roll on a plate with a cup of soy sauce and chopsticks" class="thumb-img" data-thumbsrc="https://source.unsplash.com/Jz4QMhLvGgw" />
    </li>
    <li class="thumbnail">
      <img src="https://source.unsplash.com/I7dpBg-Z5Cc" alt="young doe in a forest looking up at the camera" class="thumb-img" data-thumbsrc="https://source.unsplash.com/I7dpBg-Z5Cc" />
    </li>
  </ul>


</section>

標籤：javascript for循环 图片库

上一篇：如何在for回圈中創建多個海龜？[復制]

下一篇：在回圈中檢查陣列是升序還是降序