Question

只是一个快速的问题。我使用javascript作为图库，它的工作方式是这样的：我有大图像（太阳镜），我有它下面的颜色（简单的彩色圆圈图像），当我点击它改变太阳镜的颜色图像到另一种颜色。我在javascript中找到了一种方式（并且它正在工作）。

＆＃13;

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

＆＃13;

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

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代码。

但如果我理解正确 - 你可以设置一系列颜色和图像。 E.G。：

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

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

图像Onclick更改图像javascript

2 个答案: