Javascript 模式脚本在页面上始终打开相同的模式

我不太擅长js

我正在尝试添加一个全局脚本来打开modals

这是我的剧本

    class BulmaModal {
    constructor(selector) {
        this.elem = document.querySelector(selector)
        this.close_data()
    }

    show() {
        this.elem.classList.toggle('is-active')
        this.on_show()
    }

    close() {
        this.elem.classList.toggle('is-active')
        this.on_close()
    }

    close_data() {
        var modalClose = this.elem.querySelectorAll("[data-bulma-modal='close'], .modal-background")
        var that = this
        modalClose.forEach(function(e) {
            e.addEventListener("click", function() {

                that.elem.classList.toggle('is-active')

                var event = new Event('modal:close')

                that.elem.dispatchEvent(event);
            })
        })
    }

    on_show() {
        var event = new Event('modal:show')

        this.elem.dispatchEvent(event);
    }

    on_close() {
        var event = new Event('modal:close')

        this.elem.dispatchEvent(event);
    }

    addEventListener(event, callback) {
        this.elem.addEventListener(event, callback)
    }
}


const Modal = () => {
    const initModal = () => {
      if (document.querySelectorAll('.modal').length > 0) {
                var buttons = document.querySelectorAll(".toggle-modal"), i;

                for (i = 0; i < buttons.length; ++i) {
                    var target = (buttons[i].getAttribute('data-target'));
                    var mdl = new BulmaModal("#" + target)
                    buttons[i].addEventListener("click", function () {
                        mdl.show()
                    })
                }
      }
    };
    const init = () => {
      initModal();
   };
   return {
     init,
   };
};

export default Modal;

BulmaModal类{
构造函数（选择器）{
this.elem=document.querySelector（选择器）
这个。关闭_数据（）
}
show（）{
this.elem.classList.toggle（'is-active'）
这个节目
}
关闭（）{
this.elem.classList.toggle（'is-active'）
这个。on_close（）
}
关闭_数据（）{
var modalClose=this.elem.queryselectoral（“[data-bulma-model='close']，.model-background”）
var=this
modalClose.forEach（函数（e）{
e、 addEventListener（“单击”，函数（）{
that.elem.classList.toggle（'is-active'）
var事件=新事件（'模式：关闭'）
要素分派事件（事件）；
})
})
}
(){
var事件=新事件（'模式：显示'）
本要素分派事件（事件）；
}
on_close（）{
var事件=新事件（'模式：关闭'）
本要素分派事件（事件）；
}
addEventListener（事件、回调）{
this.elem.addEventListener（事件，回调）
}
}
常量模态=（）=>{
常量initModal=（）=>{
if（document.queryselectoral（'.modal'）。长度>0）{
var buttons=document.queryselectoral（“.toggle model”），i；
对于（i=0；i{
initModal（）；
};
返回{
初始化，
};
};
导出默认模式；

模式正在启动，但每次它打开相同的模式时。每个模态都有一个带有目标的按钮

<button class="is-success button toggle-modal" data-target="edit-participant">
Modify User
</button>

修改用户

每个模态都有一个id，对应于按钮的数据目标属性，所以在本例中

<div class="modal" id="edit-participant">
</div>

---

错误在哪里？

我认为您的

initModal

应该触发上次设置的

mdl

对象。您可以尝试更新

for

循环，如下所示

const initModal = () => {
if (document.querySelectorAll('.modal').length > 0) {
    var buttons = document.querySelectorAll(".toggle-modal"), i;

    for (i = 0; i < buttons.length; ++i) {
        buttons[i].addEventListener("click", function () {
            var target = this.getAttribute('data-target');
            var mdl = new BulmaModal("#" + target)
            mdl.show()
        });
    }
}

const initModal=（）=>{
if（document.queryselectoral（'.modal'）。长度>0）{
var buttons=document.queryselectoral（“.toggle model”），i；
对于（i=0；i