JavaScript 代码不适用于多个 HTML 元素

Question

我在我的网站上的模态弹出窗口中为自己构建了一个符号输入。问题是我可以在 PHP 的 foreach 中生成未知数量的模态。因此我的 JavaScript 代码不再起作用。您知道如何改进我的函数以使其适用于未定义数量的签名模式吗？

var signaturePad;
jQuery(document).ready(function () {
    jQuery(document).on('opened', '#sign-modal', function () {
        var signaturePadCanvas = document.querySelector('.signature-pad-canvas');
        var parentWidth = jQuery(signaturePadCanvas).parent().outerWidth();
        signaturePadCanvas.setAttribute("width", parentWidth);
        signaturePad = new SignaturePad(signaturePadCanvas);
        jQuery('#clear-signature').click(function () {
            if (signaturePad) {
                signaturePad.clear();
            }
        });
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/signature_pad@3.0.0-beta.3/dist/signature_pad.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/remodal@1.1.1/dist/remodal.min.js"></script>

<div id="sign-modal" class="remodal remodal remodal-is-initialized remodal-is-opened" data-remodal-id="sign-nda-modal-1234567889">
    <button data-remodal-action="close" class="remodal-close"></button>
    <h1>Hello</h1>
    <p>I am a random text</p>
    <div class="signature-pad-canvas-container">
        <div class="signature-pad-canvas-wrapper">
            <canvas class="signature-pad-canvas"></canvas>
        </div>
        <div class="clear-signature-wrapper">
            <span id="clear-signature">Delete</span>
        </div>
    </div>
    <br>
    <div class="remodal-buttons">
        <button data-remodal-action="cancel">Cancel</button>
        <button onclick="sign('123abc', '456cdf')">Sign</button>
    </div>
</div>
<div id="sign-modal" class="remodal remodal remodal-is-initialized remodal-is-opened" data-remodal-id="sign-nda-modal-9876543">
    <button data-remodal-action="close" class="remodal-close"></button>
    <h1>Hello</h1>
    <p>I am a random text</p>
    <div class="signature-pad-canvas-container">
        <div class="signature-pad-canvas-wrapper">
            <canvas class="signature-pad-canvas"></canvas>
        </div>
        <div class="clear-signature-wrapper">
            <span id="clear-signature">Delete</span>
        </div>
    </div>
    <br>
    <div class="remodal-buttons">
        <button data-remodal-action="cancel">Cancel</button>
        <button onclick="sign('764647gc', 'iuhiz78')">Sign</button>
    </div>
</div>
......

Answer 1

您的模态框停止工作的原因是您创建的每个模态框都是使用相同的 id 创建的。

这意味着当您使用 DOM 访问元素时，只会返回第一个元素。使用 class 并不是最好的主意，因为您失去了在不循环的情况下定位特定元素的能力。

我认为最好的解决方案是在创建模态时动态生成 id。这意味着您创建的每个模态框都可以有 sign-modal-1、sign-modal-2 等。

然后，在 JQuery 中，您可以定位具有打开的 ID 的元素，这些元素以 sign-modal 开头，即使用 JQuery 属性选择器。

JQuery 属性选择器: https://api.jquery.com/attribute-starts-with-selector/