JavaScript при нажатии на картинки для каждой отдельное содержимое в одном блоке див, как реализовать?

Question

[bayanman]

Подскажите мне как реализовать проще 12 картинок.
У каждой свое содержимое.
И все это открывается или разворачивается на одной странице в одном блоке.

Comments

[Дмитрий Лузанов]

Что?

Answer 1

[Cursedproha]

Хранить содержимое в alt самой картинки, если содержимое более сложное - ключ к нему хранить в data-* атрибуте.
https://jsfiddle.net/kx7vrde1/1/

Comments

[bayanman]

ЦЕЛУЮ В ЩЕЧКУ

[bayanman]

Только вот в содержимом будет не просто текст а целый фрейм.

[Cursedproha]

bayanman, тогда в дата атрибут пишем признак по которому определяем, что будем показывать:
https://jsfiddle.net/uukghusd/
Если url в разметке недопустим - пишем свое название и храним соответствие в ассоциативном массиве

<img src="http://via.placeholder.com/50x50" data-content="video1">
<img src="http://via.placeholder.com/50x50" data-content="video2">
<div id="content">
  <iframe width="560" height="315" src="" frameborder="0" allowfullscreen></iframe>
</div>

<script>
let contentOfImgs = {
	'video1' : 'https://www.youtube.com/embed/7FIejNVBciQ',
  'video2' : 'https://www.youtube.com/embed/_DxbT8411a8'
}
let imgs = document.querySelectorAll('img'),
		cont = document.querySelector('#content iframe');

imgs.forEach(function(img){
	img.addEventListener('click',function(){
  	cont.src = contentOfImgs[this.dataset.content];
  } ,false);
});
</script>