Question

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

这是我为Link 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>

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

1 个答案: