@KianGreenMoon

Почему JS неверно понимает тег нажатой кнопки модального окна из цикла?

Ниже html разметка вперемешку с Jinja:
{% for Videos in object_list %}
<!-- Button of Modal -->
				<button class="btn btn-primary btn-md" data-toggle="modal" data-target="#videoOn{{Videos.id}}">
        			Запустить
      			</button>
			</div>


      		<!-- Modal видео -->
			<div class="modal fade" id="videoOn{{Videos.id}}" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
			  <div class="modal-dialog modal-lg">
			    <div class="modal-content">
			      <div class="modal-body" style="padding: 0px;">
			        <div class='embed-responsive embed-responsive-16by9'>
			        	<iframe class='embed-responsive-item' src="{{Videos.url}}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
			      	</div>
			      </div>
			    </div><!-- /.modal-content -->
			  </div><!-- /.modal-dialog -->
			</div><!-- /.modal -->
{% endfor %}


А это подключаемый в конце JS:
(function(){
	// Ссылка на кнопку открытия модального окна
	var trigger = $('[data-toggle="modal"]');
	// Ссылка на iframe с видеороликом
	var iframe = $(trigger.data('target') + ' iframe');
	// Строка с адресом видео на 
	var videoSrc = iframe.attr('src');
	// При клике по кнопке добавляем к атрибуту src строку '?autoplay=1'
	trigger.on('click', function() {
		iframe.attr('src', videoSrc + '?autoplay=1');
	});
	// При скрытии модального окна
	$(trigger.data('target')).on('hidden.bs.modal', function () {
		iframe.attr('src', videoSrc);
	});
})();


Я хочу, чтобы у меня была база данных с видео из ютуба, которую я визуализирую в виде кнопок, при нажатии на которые открывается модальное окно с автовоспроизведением, и при выходе из модального окна воспроизведение бы обрывалось. Однако, trigger.data('target') получает значение только последнего data-target из цикла вне зависимости от того на какую кнопку я жму. Итого: жму на первое видео, первое виде выводится, но не автовоспроизводится. Однако автовоспроизводится (звук идёт) второе видео, причём при закрытии модального окна, воспроизведение продолжается, будто бы я и не закрывал модальное окно. Но с последним (вторым) видео в таблице БД всё работает как надо.

Короче, я не сильно знаю js, поэтому буду благодарен за подробный ответ, сам, увы, не нашёл. Хочу знать "почему так" и "как исправить".
  • Вопрос задан
  • 93 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы