Ошибка при открытии такого же диалогового окна с помощью двух разных кнопок

Question

Я пытался открыть диалоговое окно с помощью двух разных кнопок, но, возможно, из-за того же идентификатора он показывает диалоговое окно только с помощью первой кнопки. Не могли бы вы помочь мне сделать так, чтобы другая кнопка функционировала правильно, поэтому я могу открыть диалоговое окно с помощью обеих кнопок.

Вот скрипка.

http://jsfiddle.net/awaises/rsr9ojyL/1/

Код:

(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 и цикл по элементам, используя для цикла:

(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/