Minify javascript函数

Question

HTML：

<div class="product-view">
<img id="myimg" src="img/grayimg.jpg" width="372" height="511">
</div>
<ul>
<li><img class="colorbox" style="background-color:gray;" onclick="changecolor1()" alt></li>
<li><img class="colorbox" style="background-color:green;" onclick="changecolor2()" alt=""></li>
</ul>

Javascript：

<script>
    function changecolor1() {
        document.getElementById("myimg").src = "img/grayimg.jpg";
    }
</script>
<script>
    function changecolor2() {
        document.getElementById("myimg").src = "img/greenimg.jpg";
    }
</script>

在这个例子中，我为我的产品图像做了一个图像颜色交换。此示例运行良好，但希望以某种方式缩小js代码，而不是为每种颜色或其他可用选项编写脚本。

这是可能的吗？

我在其他网站上看到他们正在实现这样的颜色交换方法

onclick="changeImage('WIN0128GRN', '4219', '8656', 'Chalkboard Charm - Green', '2561')"

我是否可以制作类似于我的示例的内容，以包括上面示例中的属性？

我对javascript和jquery完全陌生，所以我将非常感谢您的支持。

Answer 1

您可以在HTML中使用自定义的data-*属性，指定颜色，从该颜色创建源并应用：

<img class="colorbox" data-color="green" style="background-color:gray;" onclick="changeColor(this)" />

function changeColor(elem) {
    var color = elem.getAttribute("data-color");
    var newImageSrc = "img/" + color + "img.jpg";
    document.getElementById("myimg").src = newImageSrc;
}