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

Question

我试图在一个PHP页面中显示两个签名，但遗憾的是第一个签名字段似乎只是工作，并且在添加另一个签名画布后消失，请参见下文：

Screenshot of jSignature page here

我已经尝试过更改CSS高度，但这不是问题，它仍然不起作用。

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

我试图将JS：$（“＃signature”）更改为$（'div [id ^ =“signature”]'）但实际的画布中断并且看起来不像它应该是的。

有谁知道如何解决这个问题或之前有同样的问题？

Answer 1

如果使用$('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"]')仍然可以找到它们。

Answer 2

你应该为不同的签名分别初始化jsignature。您可以使用签名为div提供不同的ID。例如，如果你给它们分别是“签名”和“签名2”，你可以将它们初始化两次，如：

var datapair = $（“＃signature”）。jSignature（{'UndoButton'：true}）; 。 （代码的其余部分）。

var datapair = $（“＃signature2”）。jSignature（{'UndoButton'：true}）; 。 （代码的其余部分）。