Javascript Modal с динамическим XML-контентом
У меня есть XML-БД с фильмами. К каждому фильму прилагается картинка. При нажатии на изображение открывается модальное окно, в котором вы можете увидеть информацию о фильме. С помощью следующего кода я могу перебирать все мои изображения, в том числе кнопки.
btn.forEach(element => {
element.addEventListener("click", () => {
modal.style.display = "block";
} );
} );
Проблема в том, что при этом все время открывается одно и то же модальное окно, то есть содержимое не меняется динамически, в зависимости от фильма, который я нажимаю. Я пробовал следующее
btn.forEach(element => {
element.addEventListener("click", () => {
modal.forEach(item => {
item.style.display = "block";
});
});
});
Но это изменяет содержимое на последнее в базе данных, снова показывая одно и то же модальное окно все время, а также нарушая тесный диапазон для всех модальных окон. Как мне показать правильное модальное окно для каждого фильма?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я бы рекомендовал не использовать здесь стрелочные функции из-за контекста или, так сказать, привязки `` это '', лучший способ - использовать простую старую функцию и некоторый обход DOM
Дело в том, что вы не предоставили код для кстати, поэтому я не знаю, как вы выбираете все кнопки, но я бы сделал это так:
Array.from(document.getElementsByClassName('btn')).map(btn => btn.addEventListener('click', function(){
const theContainer = this.closest('.container')
theContainer.getElementsByClassName('modal')[0].classList.add('show')
theContainer.getElementsByClassName('close')[0].onclick = function(){
this.closest('.modal').classList.toggle('show')
}
})).modal {
display: none;
}
.show {
display: block;
border: 1px solid red;
}<div class='container'>
<div class='modal'>
<p> modal </p>
<button class='close'>X</button>
</div>
<button class='btn'>0</button>
</div>
<div class='container'>
<div class='modal'>
<p> modal 1</p>
<button class='close'>X</button>
</div>
<button class='btn'>1</button>
</div>
<div class='container'>
<div class='modal'>
<p> modal 2</p>
<button class='close'>X</button>
</div>
<button class='btn'>2</button>
</div>
<div class='container'>
<div class='modal'>
<p> modal 3</p>
<button class='close'>X</button>
</div>
<button class='btn'>3</button>
</div>
Было бы полезно помочь, если бы предоставили образец сгенерированной информации html, и как инициализируются переменные
btnиmodal?