如何使用jSignature.js在一页显示多个签名？

Question

我试图在一个 PHP 页面中显示两个签名，但不幸的是，第一个签名字段似乎只是在工作，添加另一个签名后 canvas 消失了，见下文：

我试过更改 CSS 高度，但这不是问题，但仍然无效。

它一定与 div id 有关，因为另一个 div 具有相同的 id 名称 - "signature" 并导致此问题。

我试图将 JS: $("#signature") 更改为 $('div[id^="signature"]') 但实际的 canvas 中断并且看起来不像它应该的那样。

有谁知道如何解决这个问题或以前遇到过同样的问题？

Answer 1

您应该为不同的签名分别初始化 jsignature。您为带有签名的 div 提供不同的 ID。例如，如果你分别给它们 ids "signature" 和 "signature2" 你可以像这样初始化它们两次：

var datapair = $("#signature").jSignature({'UndoButton':true}); . .（其余代码） .

var datapair = $("#signature2").jSignature({'UndoButton':true}); . .（其余代码） .

Answer 2

如果您使用 $('div[id^="signature"]')，您将获得与您的 jQuery-Selector 匹配的对象数组。

因此，为了将 jSignature 应用于所有这些，您可以使用 .each 遍历所有这些：

$('div[id^="signature"]').each((index, value) => {
   $(value).jSignature({'UndoButton':true}); . .(rest of code)
}

不过，您应该确保每个 div 都有不同的 ID。您可以使用 id="signature1" 和 id="signature2"，$('div[id^="signature"]') 仍然可以找到它们。

How to display multiple signatures in one page using jSignature.js?