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

【问题标题】：MDL modal button works for one card but not other cardsMDL 模态按钮适用于一张卡，但不适用于其他卡
【发布时间】：2016-10-10 15:48:18
【问题描述】：

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

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

【问题讨论】：

标签： javascript pug material-design-lite

【解决方案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();
    });
})

【讨论】：

var showModalButton = dialog.querySelector('.show-modal'); 此语句将空值分配给按钮。其次，.show-modal 被分配给用于模式而不是对话框元素的按钮。我是否将 .show-modal 类放在了错误的位置？
对不起，我忘记了选择器中的点...var dialogs = document.querySelectorAll('.dialog');