Как передать контент через data в один клик, а не три разных?

Question

[Alexander9292]

Есть несколько колонок с элементами: изображение, заголовок и текст


При клике на один элемент из трех(или изображение, или заголовок, или текст), необходимо, чтобы открывалось модальное окно, которое будет содержать всю эту колонку, только в другом стиле.

Решил попробовать это реализовать, через дата атрибуты.
Получается передать только один элемент, из всех, по которому собственно и произошел клик, остальное не подгружается.


Почему это происходит, я понимаю, так как у меня в коде три разных клика.
Как можно это всё сократить в один клик, чтобы контент сразу передавался через data?

viewsColums.forEach( ( columns, index ) => {
            viewsImages.forEach( images => {
                images.addEventListener( 'click', () => {
                    let image = images.dataset.src; // ссылки 
                    popupDataImage[0].src = `${image}`;
                } );
            } );

            viewsTitles.forEach( titles => {
                titles.addEventListener( 'click', () => {
                    let title = titles.dataset.viewsTitle; // заголовок
                    popupDataTitle[0].innerHTML = title;
                } );
            } );

            viewsTexts.forEach( texts => {
                texts.addEventListener( 'click', () => {
                    let text = texts.dataset.viewsText; // текст
                    console.log('text: ', text);
                    popupDataText[0].innerHTML = text;
                } );
            } );
        } );

Comments

[Антон Литвиненко]

Очевидно, слушать клик по карточке, собирать с потомков данные и вставлять в модалку. Дата атрибуты тоже не нужны, собирайте сразу контент

[Alexander9292]

Антон Литвиненко, благодарю за наводку! что-то я забыл от таких методах))
Получилось немного по другому, с помощью событий, но всё же

[Alexander9292]

Получилось вот так:

document.addEventListener( 'click', event => {
            let target = event.target;

            if ( target.matches( '.views-column__image' ) || target.matches( '.views-column__image img' )
                || target.matches( '.views-column__title' ) || target.matches( '.views-column__text' ) || target.matches( '.views-column__text p' ) ) {
                viewsImages.forEach( images => {
                    let image = images.dataset.src; // ссылки 
                    popupDataImage[0].src = `${image}`;
                } );
                
                viewsTitles.forEach( titles => {
                    let title = titles.dataset.viewsTitle; // заголовок
                    popupDataTitle[0].innerHTML = title;
                } );

                viewsTexts.forEach( texts => {
                    let text = texts.dataset.viewsText; // текст
                    popupDataText[0].innerHTML = text;
                } );

                body.classList.add( 'disabled-scroll' );
                popupData.style.display = 'block';
            }  else if ( event.target.matches( '.popup-data' ) || event.target.matches( '.close' ) ) {
                popupData.style.display = 'none';
                body.classList.remove( 'disabled-scroll' );
            }
        } );

[Антон Литвиненко]

Alexander9292, главное чтобы вас устраивало)