有没有更简单的方法来按类名设置模态正文文本

Question

我正在使用带有 Pure Vanilla JavaScript 的 Bootstrap 5.1.3，我可以使用以下方法设置 .modal-body 内容：

function showBSModal(modalid, inputid) {
    var myModal = new bootstrap.Modal(document.getElementById(modalid), {});
    var theValue = document.getElementById(inputid).value;
    const parent = document.getElementById(modalid);
    parent.querySelector(".modal-body").innerHTML = "Successfully Delete Uesr with ID: " + theValue;
    myModal.show();
};

这里我动态传递 modalid 和输入框的 ID (inputid) 并获得所需的输出。

我试过 myModal.querySelector 而不是 parent.querySelector，但是没有用，因为浏览器不接受 myModal.querySelector。

问题：有没有更好的实现上面的说法？

Answer 1

myModal 是模式对象而不是 HTML 元素。让我们加载 HTML 元素，将其存储在一个变量中并使用它。

function showBSModal(modalid, inputid) {
    let context = document.getElementById(modalid);
    var myModal = new bootstrap.Modal(context, {});
    var theValue = document.getElementById(inputid).value;
    context.querySelector(".modal-body").innerHTML = "Successfully Delete Uesr with ID: " + theValue;
    myModal.show();
};

有没有更简单的方法来按类名设置模态正文文本

Is there a simpler way to set modal-body text by classname

javascript

bootstrap-5

bootstrap5-modal