如何避免使用自定义颜色选择器重复代码？

Question

我有一个初始化自定义颜色选择器的函数。 但是，对于在屏幕上初始化的每个颜色选择器，必须编写略有不同的文字。

我在想办法：-在HTML中选择所有画布并用单独的ID初始化它们并绘制它们时遇到麻烦-等待每个按钮的单击从而切换画布，最终将所选颜色存储在输入中其ID也将更改。

使用Javascript：

function initColorPicker0 () {

var canvasEl0 = document.getElementById('colorCanvas0');
var canvasContext0 = canvasEl0.getContext('2d');

var image0 = new Image(250, 250);
image0.onload = () => canvasContext0.drawImage(image0, 0, 0, image0.width, image0.height); 
image0.src = "../img/color-wheel-opt.jpg";

canvasEl0.onclick = function ( mouseEvent0 ) {
    var imgData0 = canvasContext0.getImageData(mouseEvent0.offsetX, mouseEvent0.offsetY, 1, 1);
    var rgba0 = imgData0.data;

    // store
    var bannerInput = $ ( '#bannerColor' );
    bannerInput.val("rgba(" + rgba0[0] + ", " + rgba0[1] + ", " + rgba0[2] + ", " + rgba0[3] + ")" );

    // toggle visibility on color selected
    $( '#colorBox0' ).toggle();

}
}

HTML：

<button onclick="toggleColorPicker(this);" style="display:inline-block; margin: 20px 10px;" type="button" id="0"></button>              
            <div id="colorBox0" class="brand-box color-box">
              <label for="bannerColor">Banner Background Color:
                <br>
                <input style="display:none;" class="form-control" name="bannerColor" id="bannerColor" type="text">
                <br>
                <canvas style="border-radius:50%;" id="colorCanvas0" class="color-canvas" width="250" height="250"></canvas>
              </label>
            </div>

截至目前，每次使用颜色选择器时，我都会重新编写该函数，以考虑画布ID的变化以及存储所选颜色的输入元素的ID。

我如何避免这种糟糕的代码重复？

编辑：尝试什么我描述：

    function handleColorPickers () {
    // loop through all canvas elements on page
    for ( i = 0; 1 < /* number of canvases */; i++) {

        // store each canvas in array 
        canvasArray[i] = document.getElementsByTagName("canvas");

        // get context of canvas element store dynamically
        contextArray[i] = canvasArray[i].getContext("2d");

        // construct new image
        imageArray[i] = new Image(250, 250);
        imageArray[i].onLoad = () => contextArray[i].drawImage(imageArray[i], 0, 0, imageArray[i].width, imageArray[i].height);
        imageArray[i].src = "../img/color-wheel-opt.jpg";

        canvasArray[i].onclick = function ( mouseEvent /* dynamic? */) {
            // get color selection data
            dataArray[i] = contextArray[i].getImageData(mouseEvent.offsetX, mouseEvent.offsetY, 1, 1);

            rgbaArray[i] = dataArray[i].data;

            /* somehow select input dynamically, not just $('input'), & insert color value */
            dynamicInput.val("rgba(" + rgbaArray[i][0] + "," + rgbaArray[i][1] + "," + rgbaArray[i][2] + "," + rgbaArray[i][3] + ")");

            //toggle visibility 
            canvasArray[i].toggle();
        }
    }
}

Answer 1

使用类而不是ID：

function initColorPickers () {

    var canvasElems = document.querySelector('.colorCanvas0,.colorCanvas1,.colorCanvas2');
    var canvasContext = canvasElems.getContext('2d');

    var image0 = new Image(250, 250);
    image0.onload = () => canvasContext0.drawImage(image0, 0, 0, image0.width, 
    image0.height); 
    image0.src = "../img/color-wheel-opt.jpg";

    canvasElems.onclick = function ( mouseEvent0 ) {
         var imgData0 = canvasContext0.getImageData(mouseEvent0.offsetX, 
         mouseEvent0.offsetY, 1, 1);
         var rgba0 = imgData0.data;

         // store
         var bannerInput = $ ( '#bannerColor' );
         bannerInput.val("rgba(" + rgba0[0] + ", " + rgba0[1] + ", " + rgba0[2] + ", " + rgba0[3] + ")" );

         // toggle visibility on color selected
         $( '#colorBox0' ).toggle();

     }
}