Question

我一直在努力通过两个不同的按钮打开一个对话框，但可能因为相同的ID，它只显示第一个按钮的对话框。你可以帮我把另一个按钮正常工作，这样我就可以通过两个按钮打开对话框了。

这是小提琴。

代码：

(function() {
  var dlgtrigger = document.querySelector( '[data-dialog]' ),
    somedialog = document.getElementById( dlgtrigger.getAttribute( 'data-dialog' ) ),
    dlg = new DialogFx( somedialog );
  dlgtrigger.addEventListener( 'click', dlg.toggle.bind(dlg) );
})();

Answer 1

问题是document.querySelector('[data-dialog]');只返回找到的第一个元素。我添加了jQuery，可以正确找到它们，并通过单击任何按钮打开对话框。请参阅fiddler。

Answer 2

您可以使用querySelectorAll并使用for循环遍历元素：

(function () {
    var dlgtrigger = document.querySelectorAll('[data-dialog]');

    for (var i = 0; i < dlgtrigger.length; i++) {
        dlgtrigger[i].addEventListener('click', function () {
            var somedialog = document.getElementById(this.getAttribute('data-dialog'));

            console.log('clicked:', this, 'called:', somedialog);
        }, false);
    }
})();

http://jsfiddle.net/742mk702/

通过两个不同的按钮打开相同的对话框

2 个答案: