图片点击更改图像javascript

Question

只是个快速的问题。我为一个画廊使用javascript，它的工作原理是这样的:我有大图像(太阳镜)，下面有颜色(简单的彩色圆圈图像)，当我单击颜色时，它会将太阳镜图像更改为另一种颜色。我在javascript中找到了这样一种方法(而且它正在工作)。

​

<script type="text/javascript">
    
    function change() {
      var image = document.getElementById('iks8600A');
      image.src = ('assets/szemuveg/iks8600B.jpg');
        document.getElementById('link').href = 'assets/szemuveg/iks8600B.jpg';
    }
    </script>
    <script type="text/javascript">
    
    function back() {
      var image = document.getElementById('iks8600A');
      image.src = ('assets/szemuveg/iks8600A.jpg');
      document.getElementById('link').href = 'assets/szemuveg/iks8600A.jpg'
    }
    </script>
    <script type="text/javascript">
    
    function change2() {
      var image = document.getElementById('S8621A');
      image.src = ('assets/szemuveg/s8621A.png');
    }
    </script>

​

所以我必须在每一张太阳镜图片上都这样做，这将是一个非常长的代码。这样做对吗？还是有更简单的方法来做？谢谢你的帮助/建议。

Answer 1

你试过这样的东西吗？

var imgUrls = {
    red : "path/to/redImg.jpg",
    blue : "path/to/blueImg.jpg",
    green : "path/to/greenImg.jpg",
    black : "path/to/blackImg.jpg"
};

function switchGlassesColor (color) {
    document.getElementById('iks8600A').src = imgUrls[color];
    document.getElementById('link').href = imgUrls[color];
}

相应的HTML：

<img id="iks8600A" alt="Sunglasses... Deal with it!"></img>
<img onclick="switchGlassesImage('red')" alt="RED SUNGLASSES, Omagad!"></img>
<img onclick="switchGlassesImage('blue')" alt="Blue singlasses, with a swag diesel effect"></img>

Answer 2

你的问题还不清楚。请添加这些元素的HTML代码。

但是如果我正确地理解了你-你可以设置一系列的颜色和图像。例如：

imagesArray = [{color: 'red',  image: 'assets/szemuveg/iks8600A.jpg'},
               {color: 'blue', image: 'assets/szemuveg/iks8600B.jpg'}];

之后，您可以在单个函数中使用它来更改图像。