当我单击另一个图像时如何更改图像？（没有点击）答案

【问题标题】：How can I change an image when I click on another image? (Without onclick)当我单击另一个图像时如何更改图像？（没有点击）
【发布时间】：2023-03-13 15:14:01
【问题描述】：

我正在做一个登陆页面，并希望在我点击其他图片时更改主图片。我试过这个

<div class="thumb">
  <ul>
    <li> 
      <img id="img1" class="smallImg coupe" src="./assets/smallCar1.png" alt="small img">
    </li>
  </ul>
  <ul>
    <li>
      <img id="img2" class="smallImg" src="./assets/smallCar2.png" alt="small img">
    </li>
  </ul>
  <ul>
    <li>
      <img id="img3" class="smallImg" src="./assets/smallCar3.png" alt="small img">
    </li>
  </ul>
</div>

function imageChange() {
  let picDefault = document.getElementById("img");

  if ((picDefault = "img")) {
    picDefault.src = "./assets/img1.png";
  }
}
picDefault.addEventListener(click, imageChange);

【问题讨论】：

click 需要在addEventListener() 中加引号
picDefault() 是函数本地的，不能在外面使用
if ((picDefault = "img")) 永远不会是真的。 picDefault 是一个 DOM 元素，而不是字符串。你想在那里做什么？
嘿@Barmar，if ((picDefault = "img")) 将始终为真，因为它是一个具有“真”结果的作业：D ...
不管怎样，这里的问题是什么？

标签： javascript html css

【解决方案1】：

通过单击另一个图像来更新图像的示例代码。用例可能完全不同。

const thumps =  document.getElementsByClassName("thump"); // secondary images
const main =  document.getElementById("main");

for(let i = 0; i < thumps.length; i ++) {
  const el = thumps[i]
  el.addEventListener("click", function(e) { //  add click handler
    const elem = e.target;
    main.src = elem.src;
  })
}

#main {
  max-width: 300px;
}

.thump {
  width: 100px;
  margin: 4px;
  padding: 2px;
  border: 1px solid #ccc;
  display: inline-block;
}

<div>
  <h5>Main Image</h5>
  <img src="https://images.unsplash.com/photo-1644243019151-0bb97ce1af84" id="main"/>
</div>

<h5>Click Images below thumpnails to update main image</h5>
<div class="row">
  <img src="https://images.unsplash.com/photo-1644235279538-4cc7cbdca6a8" class="thump">
  <img src="https://images.unsplash.com/photo-1643443026948-c17b9bb16758" class="thump">
  <img src="https://images.unsplash.com/photo-1644243019151-0bb97ce1af84" class="thump">
</div>

【讨论】：