https://jsfiddle.net/u8ndofac/
Так вот.
Есть модуль WindowComponent, который возвращает конструктор. Далее создаются его два экземпляра:
var myFiles = new WindowComponent({
action: '#my-files',
ID: 'myFiles',
width: '200',
height: '200',
});
var myComputer = new WindowComponent({
action: '#my-computer',
ID: 'myCompWindow',
width: '200',
height: '200',
});
Также у нас есть html, где у нас есть icon'ы, по которым мы должны кликать и показывать модалки, которые привязаны к айдишникам иконокок:
<div id="app">
<div class="icon" id="my-files">
<div class="icon__img">
<img class="icon__src" src="src/img/computer.png">
</div>
<div class="icon__title">
<p class="icon__info">Мои документы</p>
</div>
</div>
<div class="icon" id="my-computer">
<div class="icon__img">
<img class="icon__src" src="src/img/computer.png">
</div>
<div class="icon__title">
<p class="icon__info">Мой компьютер</p>
</div>
</div>
</div>
Так вот, почему-то в модуле WindowComponent в этом месте:
document.querySelector(this.action).addEventListener('click', function() {
document.getElementById(self.ID).classList.remove('window__hide');
});
У нас срабатывает только последний экземпляр. Т.е. клик ловиться исключительно на "#my-computer" и появляется модалка myComputer. Клик по "#my-files" ничего не дает, ошибок нет тоже. Если поменять местами порядок создания экземпляра, то наоборот будет показываться модалка "#myFiles" по клику на "#my-files", а "#my-computer" ничего отлавливать не будет.
Т.е. постоянно вызывается последний созданный экземпляр, хотя у нас добавляются в id="app" две разные модалки со своими свойствами(как и должно быть). Такое ощущение, будто после вызова второго экземпляра, все экземляры до него ломаются, при этом, как я уже говорил, модалки в документе все есть и имеют свои свойства.
https://jsfiddle.net/u8ndofac/
Ребята, помогите, пожалуйста!)
