如何通过一次点击来改变多个图像

问题描述：

我真的很新的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更改为我想要的。对于我添加的每一个环节，我复制脚本并稍微改变一下。我知道有一种方法可以通过变量或其他东西来优化单个脚本。有什么帮助吗？谢谢

你知道数组？您可以将数组传递给函数，并在更改图像的源代码时将其循环。 –

答

为了区分图像组必须有一个模式。尝试添加在每个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>

如何通过一次点击来改变多个图像

相关推荐