用Javascript中的縮略圖替換主圖像

Question

這是我的腳本：

function changeImage(event){
    event = event || window.event;
    var targetElement = event.target || event.srcElement;

    if (targetElement.tagName == "IMG"){
        document.getElementByClass("img-big-wrap").src = targetElement.getAttribute("src");
        document.getElementById("mainimageLink").href = 'link'+targetElement.getAttribute("data-link")+'.html';
    }
}

此答案的啟發： Javascript Gallery-主圖像href更改

我的HTML：

<div class="gallery-wrap">


  <div class="img-big-wrap">
    <a id="mainimagelink" href="<?php echo $data[0][gallery][0][photo];?>">
    <img class="img-big-wrap" src="<?php echo $data[0][gallery][0][photo];?>" alt="">

  </div>
  <div class="img-small-wrap" onclick="changeImage(event)">
    <div class="item-gallery"> <img src="<?php echo $data[0][gallery][1][thumb];?>" data-link="1"> </div>
    <div class="item-gallery"> <img src="<?php echo $data[0][gallery][2][thumb];?>" data-link="2"> </div>
    <div class="item-gallery"> <img src="<?php echo $data[0][gallery][3][thumb];?>" data-link="3"> </div>
    <div class="item-gallery"> <img src="<?php echo $data[0][gallery][4][thumb];?>" data-link="4"> </div>
  </div>
 </div>

該代碼實際上只是打開主圖像的鏈接，僅當我單擊“打開”時，我想用縮略圖更改主圖像，我不知道我在做什么是好的解決方案

Answer 1

首先，您多次使用同一類，並嘗試訪問它img-big-wrap 。

也沒有名為getElementByClass而是使用getElementsByClassName這是一個數組，因為您可以在同一個類中包含多個div。

在此處輸入"mainimageLink" （您使用id="mainimagelink"調用div）時，情況很重要。

我已經使用addEventListener將onclick移到了JS中，這節省了我從div傳遞的參數。

在您的縮略圖父div div myImgDiv添加一個id並使用它將Event Listener掛接到它。

代碼如下所示（所做的更改不多）：

 let smallImgDiv = document.getElementById('myImgDiv'); smallImgDiv.addEventListener('click', (e) => { let targetElement = e.target || e.srcElement; let tagName = targetElement.tagName; if(tagName === "IMG") { document.getElementById('bigImage').src = targetElement.getAttribute("src"); document.getElementById("mainimagelink").href = 'link' + targetElement.getAttribute("data-link") + '.html'; } }); 

 .img-small-wrap img{ width: 150px; height: 150px; } .img-big-wrap { height: 200px; } 

 <div class="gallery-wrap"> <div class="img-big-wrap"> <a id="mainimagelink" href="#"> <img id="bigImage" class="img-big-wrap" src="http://via.placeholder.com/300.png" alt=""> </a> </div> <div id="myImgDiv" class="img-small-wrap"> <div class="item-gallery"> <img src="https://getuikit.com/v2/docs/images/placeholder_200x100.svg" data-link="1"> </div> <div class="item-gallery"> <img src="https://cdn.dribbble.com/users/312581/screenshots/1676038/female-placeholder_1x.png" data-link="2"> </div> <div class="item-gallery"> <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1134418-200.png" data-link="3"> </div> <div class="item-gallery"> <img src="https://source.sierrawireless.com/~/media/developer%20zone/icons/sw_dz_icons_placeholder.ashx?h=240&la=en&w=240" data-link="4"> </div> </div> 

Answer 2

工作伙伴： http ://plnkr.co/edit/pjpHBUD4yPihqr7lJKAD?p=preview

<div class="gallery-wrap">
    <div>
      <a id="mainimagelink" href="https://blog.conservation.org/wp-content/uploads/2014/06/ci_19290600_cropped.jpg">
        <img class="img-big-wrap" src="https://blog.conservation.org/wp-content/uploads/2014/06/ci_19290600_cropped.jpg?>" alt="">
      </a>
    <hr/>
    </div>
    <div class="img-small-wrap" ">
    <div class="item-gallery " onclick="changeImage(event) "> <img src="https://s5.favim.com/610/52/Favim.com-winter-nature-small-canon-eos-7d-474348.jpg " data-link="1 "> </div>
    <div class="item-gallery " onclick="changeImage(event) "> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTfAMUZQLGObfUBSLgnPj5b5C7Ww2DNMtKbwkuTbglK-p1La17BnA " data-link="2 "> </div>
  </div>
 </div>

您錯過了幾件事。

1. HTML DOM的構造不好。 標識為id mainimagelink的標簽未關閉，從而導致每次您單擊任何圖像時都打開主圖像。

2. 不確定您的用例，但我相信您正在嘗試創建帶有預覽的縮略圖庫。 添加了圖像URL和CSS以模擬API響應。

3. 'img-big-wrap'類用於圖像容器和實際的圖像本身，當您嘗試使用js定位元素時會導致錯誤。

4. document.getElementByClass不是該方法的正確名稱。 我相信您要使用“ document.getElementsByClassName”，它返回一個數組，因為多個元素可以具有相同的className。 請參閱querySelector（它們中最有用的）：

   https://www.w3schools.com/jsref/met_document_queryselector.asp

祝一切順利！