Question

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

.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();
    });

Answer 1

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

// 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();
    });
})

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

1 个答案: