如何通过单击更改多个图像答案

【问题标题】：how to change several images with a single click如何通过单击更改多个图像
【发布时间】：2017-04-02 18:29:22
【问题描述】：

我对 javascript 真的很陌生，在学习的同时，我试图通过 onclick 功能将画廊中的图像更改为其他人。我有不同画廊的链接。当我点击链接 1 时，imgs 是 one1.jpg、one2.jpg 等等。当我点击链接 2 时，imgs 是 two1.jpg、two2.jpg 等。

这是我为链接 1 制作的粗略脚本：

<script>
  function one() {
    document.getElementById("foto1").src="one1.jpg";
    document.getElementById("foto2").src="one2.jpg";
          }
</script>


<a href="#" onclick="one()">Link 1</a>
<a href="#" onclick="two()">Link 2</a>     
<img id="foto1" src="tre1.jpg"></a>
<img id="foto2" src="tre2.jpg"></a>

等等

我为第二个链接创建了另一个名为 two() 的函数，它具有相同的内容，但将 src 更改为我想要的。对于我添加的每个链接，我都会复制脚本并稍作更改。我知道有一种方法可以优化到带有变量或其他东西的单个脚本。有什么帮助吗？谢谢

【问题讨论】：

你了解数组吗？您可以将数组传递给函数并在更改图像源时对其进行循环。

标签： javascript jquery html

【解决方案1】：

为了区分一组图像，必须有一个模式。尝试在每个 img 标签上添加一个类来区分图像以更改其来源，您可以按如下方式遍历图像：

    <a href="#" onclick="one()">Link 1</a>
    <a href="#" onclick="two()">Link 2</a>     
    <img class="img1" id="foto1" src="foto1.jpg">
    <img class="img1" id="foto2" src="foto1.jpg">

    <img class="img2" id="foto3" src="pic1.jpg">
    <img class="img2" id="foto4" src="pic2.jpg">
    <script>
  function one() {
      var img = document.getElementsByClassName("img1");
      for (var i in img) {
          img[i].src = "foto" + 1 + ".jpg"
      }
  }

  function two() {
      var img = document.getElementsByClassName("img2");
      for (var i in img) {
          img[i].src = "pic" + 1 + ".jpg"
      }
  }
  </script>

【讨论】：