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