一個來自多個html按鈕的javascript函數

Question

奇怪的問題，但我有一個在畫布上繪制的javascript函數。 我在使用該功能的HTML上創建了按鈕。 我有多個按鈕，這些按鈕具有不同的圖像源，我想將其用於該功能，而無需多次重復該功能，而只需更改imgsrc。 我嘗試提供按鈕ID，但您不應有多個ID。 我嘗試使用類，但是似乎沒有用。 使用AngularJS。

HTML

<md-button onclick="(new avatarCanvas()).body()" style="border: 3px solid black;"><input class="image" value="www.website.com/image1.png" type="hidden"></md-button>

<md-button onclick="(new avatarCanvas()).hair()" style="border: 3px solid black;"><input class="hair" value="www.website.com/image2.png" type="hidden"></md-button> 

<md-button onclick="(new avatarCanvas()).hair()" style="border: 3px solid black;"><input class="hair" value="www.website.com/image3.png" type="hidden"></md-button>

<md-button onclick="(new avatarCanvas()).hair()" style="border: 3px solid black;"><input class="hair" value="www.website.com/image4.png" type="hidden"></md-button>

<md-button onclick="(new avatarCanvas()).hair()" style="border: 3px solid black;"><input class="hair" value="www.website.com/image5.png" type="hidden"></md-button>

JavaScript的

var canvas1 = document.getElementById('layer1');
var ctx1 = canvas1.getContext('2d');

var canvas2 = document.getElementById('layer2');
var ctx2 = canvas2.getContext('2d');

var imageObj = new Image();

this.body = function() { 
imageObj.onload = function() {
  ctx1.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height);
};
imageObj.src = document.getElementsByClassName("image").value;
}

this.hair = function() {
ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
imageObj.onload = function() {
  ctx2.drawImage(imageObj, 64.43, 7, imageObj.width, imageObj.height);
 };
imageObj.src = document.getElementsByClassName("hair").value;
}

Answer 1

我建議您在按鈕上創建自定義指令，以處理單擊事件，因為它是重復任務。 您可以添加自定義屬性，例如“ data-img-path”，而無需使用隱藏變量來傳遞圖像路徑。

例如：

<md-button data-load-avatar style="border: 3px solid black;" data-image-path="www.website.com/image1.png"  />

這里的“ data-load-avatar”是一個自定義指令，您可以在其中添加click事件並讀取屬性“ data-image-path”，並在加載畫布時使用此圖像路徑。 這樣，您的代碼也將很干凈且可維護。