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 - Main Image href change

我的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>

代码实际上只是打开主图像的链接当我点击On时，我想用缩略图更改主图像，我不知道我正在做的是不是很好的解决方案

Answer 1

首先，您多次使用同一个类并尝试访问它img-big-wrap。

也没有名为getElementByClass的访问者使用 getElementsByClassName这是一个数组，因为你可以有多个具有相同类的div。

错误在这里"mainimageLink"，你用id="mainimagelink"调用你的div，案件很重要。

我已使用addEventListener将onclick移至JS中，这样可以节省我从div传递的参数。

在您的缩略图父div [{1}}中添加id，并用它将myImgDiv挂钩到它。

以下是代码的样子（没有做太多更改）：

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;
}

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>

你错过了几件事。

HTML DOM构建得不好。 id为mainimagelink的标签未被关闭，每次点击任何图像时都会打开主图像。
不确定您的用例，但我相信您正在尝试使用预览创建缩略图库。添加了图像URL和CSS来模拟API响应。
'img-big-wrap'类用于图像容器和实际的图像本身，当您尝试使用js定位元素时会导致错误。
document.getElementByClass不是该方法的正确名称。我相信你要去'document.getElementsByClassName'，它返回一个数组，因为多个元素可以有相同的className。请参阅querySelector（最有用的全部）：

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

一切顺利！

在Javascript中用缩略图替换主图像

2 个答案: