签名板：循环遍历每个画布以创建签名板答案

【问题标题】：Signature-Pad: looping through each canvas to create a signature-pad签名板：循环遍历每个画布以创建签名板
【发布时间】：2017-10-16 02:46:01
【问题描述】：

Javascript：

$(document).ready(function () {
    $('.signature-pad').each(function () {
        var signaturePad = new SignaturePad($(this), {
            backgroundColor: 'rgba(255, 255, 255, 0)',
            penColor: 'rgb(0, 0, 0)'
        })
    });
});

HTML：

<div class="wrapper" style="position:relative; width:400px; height: 200px; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none">
  <canvas id="signature-pad1" class="signature-pad" width=400 height=200 style=" position: absolute; left: 0; top: 0; width:400px; height:200px;"></canvas>
</div>
<div class="wrapper" style="position:relative; width:400px; height: 200px; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none">
  <canvas id="signature-pad2" class="signature-pad" width=400 height=200 style=" position: absolute; left: 0; top: 0; width:400px; height:200px;"></canvas>
</div>

我的想法是我包含的来自 https://github.com/szimek/signature_pad/tree/v1.5.3 的 js 库将在每个画布之外创建一个签名板。 js 应该使用 class="signature-pad" 遍历每个画布。

问题是，如果我只有一个带有 id="signature-pad" 的画布，那么它可以按预期工作，但是如果我有多个具有相同类但编号为 id 的画布，那么它就无法识别它们。有人可以帮我弄清楚为什么吗？提前致谢。

【问题讨论】：

标签： javascript jquery html loops canvas

【解决方案1】：

$('.signature-pad').each(function () {
            var signaturePad = new SignaturePad(document.getElementById(this.id), {
                backgroundColor: 'rgba(255, 255, 255, 0)',
                penColor: 'rgb(0, 0, 0)'
            })
        });

Signature_Pad 期待一个元素，我认为 $(this) 会给出这个，但显然不是。所以，我使用了 document.getElementById(this.id) 并且它按预期工作。

【讨论】：