图像Onclick更改图像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'}];

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