缩小javascript函数

HTML:

函数changecolor2（）{
document.getElementById（“myimg”）.src=“img/greenimg.jpg”；
}

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

这是可能的吗

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

onclick=“changeImage（'WIN0128GRN'，'4219'，'8656'，'Charm-Green'，'2561'）”

我可以做一些类似于我的示例的东西，包括上面示例中的属性吗

---

我对javascript和jquery完全陌生，因此非常感谢您的支持。

您可以在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>

---

如果页面上有多个
.product view
元素，我可能会将目标元素（在本例中为
#myimg
）也作为一个单独的数据属性。但是如果我想交换产品的形状，而不是颜色，我应该使用什么来代替“数据颜色”键入？@andryesh——可以帮助您表示所单击元素的形状的任何内容<代码>数据形状

？@tymeJV-ohh很抱歉，现在一切都清楚了，谢谢支持。@Cory-在我的例子中，每页将有一个

。产品视图

元素。

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

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