javascript - 如何通过单击更改多个图像

Question

我对 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 更改为我想要的。对于我添加的每个链接，我都会复制脚本并进行一些更改。我知道有一种方法可以优化带有变量或其他内容的单个脚本。有什么帮助吗？谢谢

Answer 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>