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

在这个例子中，我maked我的产品图像的图像色彩交换。这个例子工作正常，但希望以某种方式缩小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; 
}