Как передать значения из одного if в другой?

Question

[Сергей Бурдужа]

Добрый день.
На сайте есть картинка, я на нее кликаю и открывается попап с другой картинкой и кнопкой play.
Если нажимаю на play, то начинается воспроизводится видео.

Проблема в том, что я повесил обработчик на родителя.
И если попадаю на картинку, то открывается попап и получаю src iframe и картинку из попапа.

.cucina
    .container
        .cucina__wrap
            .cucina__top
                .cucina__link(data-link="https://www.youtube.com/embed/98xOZfICNrk" data-image="assets/i/cucina-modal/il-pollo-in-tavola-1.jpg")
                    img(src="assets/i/cucina-1.png" alt="")
                .cucina__link(data-link="https://www.youtube.com/watch?v=3NZjam7gRQc&list=PLImJBqlU_8yBcMgfj72owizeuIHfAwb1j&index=36&ab_channel=AIAFood" data-image="assets/i/cucina-modal/La-sfida-di-Wudy-1.jpg")
                    img(src="assets/i/cucina-2.png" alt="")
                .cucina__link(data-link="https://www.youtube.com/watch?v=2_KYtDsfB7g&list=PLImJBqlU_8yBcMgfj72owizeuIHfAwb1j&index=9&ab_channel=AIAFood" data-image="assets/i/cucina-modal/In-Forchetta-con-Wudy.jpg")
                    img(src="assets/i/cucina-3.png" alt="")
                .cucina__link(data-link="https://www.youtube.com/watch?v=3NZjam7gRQc&list=PLImJBqlU_8yBcMgfj72owizeuIHfAwb1j&index=36&ab_channel=AIAFood" data-image="assets/i/cucina-modal/La-sfida-di-Wudy-2.jpg")
                    img(src="assets/i/cucina-4.png" alt="")
            .cucina__bottom
                .cucina__content
                    section.section__header
                        h3.section__subtitle Da più di 50 anni insieme
                        h2.section__title La cucina<br> più Grande<br> d’Italia
                        a(href="#").btn Scopri la Nostra Storia
                .cucina__link.first(data-link="https://www.youtube.com/embed/98xOZfICNrk" data-image="assets/i/cucina-modal/il-pollo-in-tavola.jpg")
                    img(src="assets/i/cucina-5.png" alt="")
                .cucina__link.second(data-link="https://www.youtube.com/embed/KKE_RHGDcdY" data-image="assets/i/cucina-modal/il-pollo-in-tavola.jpg")
                    img(src="assets/i/cucina-6.png" alt="")
                .cucina__link.third(data-link="https://www.youtube.com/embed/98xOZfICNrk" data-image="assets/i/cucina-modal/il-pollo-in-tavola.jpg")
                    img(src="assets/i/cucina-7.png" alt="")
                .cucina__link.fourth(data-link="https://www.youtube.com/embed/KKE_RHGDcdY" data-image="assets/i/cucina-modal/il-pollo-in-tavola.jpg")
                    img(src="assets/i/cucina-8.png" alt="")
            .cucina-range
                .cucina-range__number 1968
                .cucina-range__line
                    .cucina-range__line--active
                .cucina-range__number 2020

    .cucina-modal
        .cucina-modal__player
            .cucina-modal__close Close <span>&times;</span>
            .cucina-modal__pause
                img(src="assets/i/static/pause-round-button.svg")
            .cucina-modal__play
                img(src="assets/i/static/play-arrow-triangle-in-circular-button-outline.svg")
            .cucina-modal__img
                img(src="assets/i/cucina-modal/il-pollo-in-tavola.jpg" alt="")
            .cucina-modal__iframe
                iframe(src="" frameborder="0" allow="autoplay;" allowfullscreen)

Но, если попадаю на кнопку play, нужно src iframe вставить в iframe из попап, чтобы картинка исчезла и видео начала воспроизводится.

На кнопку play, когда нажимаю, то src iframe пустой.

$('.cucina').on('click', function (event) {
		const target = $(event.target);
		let videoSrc = '';
		let videoImg = '';

		if (target.is(".cucina__link")) {
			videoImg = target.attr('data-image');
			videoSrc = target.attr('data-link') + '?rel=0&showinfo=0&autoplay=1';
			$('.cucina-modal__img img').attr('src', videoImg);
			$('.cucina-modal').fadeIn();
			$('body').css({
				'overflow': 'hidden',
				'paddingRight': '14px'
			});
		}

		if (target.is('.cucina-modal__play img')) {
			$('.cucina-modal__play').fadeOut();
			$('.cucina-modal__close').fadeOut();
			$('.cucina-modal__img').fadeOut();
			$('.cucina-modal iframe').attr('src', videoSrc);
		}


	});

Как получить значение?

Заранее благодарен.

Answer 1

[Роман Якимчук]

Трудно понять как работает решение, но, похоже что спроектировано неверно.

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

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

Если простое решение, то можно сделать через замыкание, т.е. делается IIFE (функция, которую объявили и сразу же вызвали), внутри неё создается переменная, и возвращается вам слушатель, и тогда из слушателя можно будет перезаписывать эту внешнюю переменную.

element.addEventListener('click', function () {
  var sharedVariable;

  return function () {
    sharedVariable = 1; // Здесь переменная всегда доступна для чтения и записи
  }
}());

В любом случае рекомендую менять архитектуру.

Как еще один простой вариант, это, хотя бы, можно сделать функцию openModal, и вызывать её при клике на ссылку. Она установит значение в разметке модалки, и откроет модалку, а дальше вы выберете нужный элемент из разметки и получите актуальную ссылку.

Comments

[Сергей Бурдужа]

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

let videoSrc = '';
	let videoImg = '';

	$('.cucina').on('click', function (event) {
		const target = $(event.target);

		if (target.is(".cucina__link")) {
			videoImg = target.attr('data-image');
			videoSrc = target.attr('data-link') + '?rel=0&showinfo=0&autoplay=1';
			console.log(videoSrc);
			$('.cucina-modal__img img').attr('src', videoImg);
			$('.cucina-modal').fadeIn();
			$('body').css({
				'overflow': 'hidden',
				'paddingRight': '14px'
			});
		}

		if (target.is('.cucina-modal__play img')) {
			$('.cucina-modal__play').fadeOut();
			$('.cucina-modal__close').fadeOut();
			$('.cucina-modal__img').fadeOut();
			$('.cucina-modal iframe').attr('src', videoSrc);
		}
	});
	$('.cucina-modal__close').on('click', function () {
		$('.cucina-modal').fadeOut();
		$('body').css({
			'overflow': 'visible',
			'paddingRight': '0'
		});
	});

[Роман Якимчук]

Это создание переменных в глобальной области видимости, и считается антипаттерном.
https://stackoverflow.com/questions/18635136/why-a...

[Роман Якимчук]

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