MDL模态按钮适用于一张卡，但不适用于其他卡

MDL modal button works for one card but not other cards

本文关键字：适用于 其他 一张 不适用 按钮 模态 MDL      更新时间：2023-09-26

这是用玉写的一页。它为事件(变量)的每个值生成卡片。目的是为每个卡创建一个模态，其中将用于显示事件信息。模态按钮适用于第一张卡片。但对其余的卡片不起作用。

.mdl-grid
    each val in pdfs
        .mdl-cell.mdl-cell--4-col.mdl-cell--4-offset
            .demo-card-square.mdl-card.mdl-shadow--2dp
                .mdl-card__title
                    h2.mdl-card__title-text #{val.title}
                .mdl-card__supporting-text
                    | #{val.desc}
                .mdl-card__actions.mdl-card--border
                    a.mdl-button.mdl-button--colored.mdl-js-button.mdl-js-ripple-effect(href="/uploads/"+'#{val.filename}',id='embedUrl' target="_blank")
                        | View Event
                    button.mdl-button.mdl-button--colored.mdl-js-button.mdl-js-ripple-effect.mdl-button.show-modal(type='button')
                        | Review
                    // Icon button
                    a.mdl-button.mdl-js-button.mdl-button--icon.mdl-button-color--red
                        i.material-icons close
                    dialog.Viewabstractmodal.mdl-dialog
                        .mdl-dialog__content
                        .mdl-dialog__actions.mdl-dialog__actions
                            button.mdl-button.close.mdl-button--colored(type='button') Submit
script.
    var dialog = document.querySelector('dialog');
    var showModalButton = document.querySelector('.show-modal');
    if (! dialog.showModal) {
        dialogPolyfill.registerDialog(dialog);
    }
    showModalButton.addEventListener('click', function() {
        dialog.showModal();
    });
    dialog.querySelector('.close').addEventListener('click', function() {
        dialog.close();
    });

您需要为每个对话框分配事件侦听器，而不仅仅是第一个。

// get ALL of the dialogs
var dialogs = document.querySelectorAll('.dialog');
// iterate and add listeners to each dialog
dialogs.forEach(function(dialog){
    // ... polyfill
    // use querySelector method of dialog, not the whole document
    var showModalButton = dialog.querySelector('.show-modal');
    showModalButton.addEventListener('click', function() {
        dialog.showModal();
    });
    dialog.querySelector('.close').addEventListener('click', function() {
        dialog.close();
    });
})
相关文章：