Question

使用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 =＆＃34; signature-pad＆＃34;遍历每个画布。

问题是如果我只有一个带有id =＆＃34; signature-pad＆＃34;的画布。然后它按预期工作，但如果我有多个相同类但编号为ids的画布，那么它不会识别它们。有人可以帮我找出原因吗？提前谢谢。

Answer 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），它按预期工作。

Signature-Pad：循环遍历每个画布以创建签名板

1 个答案: