Elisseii
@Elisseii
Пишу музыку и код.

Как применить один обработчик событий к множеству элементов, для индивидуальной обработки, не раздувая / дублируя код?

Прошу прощения за "говнокод", сам понимаю что так не делается, но я пока не гуру в JS, по этому и прощу помощи.

Вот код. Как избежать этого дублирования?
Дело в том, что таких объектов может быть очень много к примеру 100, по этому тут сам собой напрашвается какой-то другой метод.

HTML
<div class="bface-slide-1"></div>
<div class="modal-wrapper modal-1">
	Контент-1
</div>

<div class="bface-slide-2"></div
<div class="modal-wrapper modal-2">
	Контент-2
</div>

<div class="bface-slide-3"></div
<div class="modal-wrapper modal-3">
	Контент-3
</div>


JS
$(document).ready(function(){
/////// РАБОТАЮЩИЙ JS ГОВНОКОД

//// Slide-1 & Modal-1
	$("body").on('click','.bface-slide-1',function () {
		$(".modal-1").fadeIn("slow");
		$(".modal-1").css({
			"display" : "flex"
		});
	});

//// Slide-2 & Modal-2
	$("body").on('click','.bface-slide-2',function () {
		$(".modal-2").fadeIn("slow");
		$(".modal-2").css({
			"display" : "flex"
		});
	});

//// Slide-3 & Modal-3
	$("body").on('click','.bface-slide-3',function () {
		$(".modal-3").fadeIn("slow");
		$(".modal-3").css({
			"display" : "flex"
		});
	});

});/*end  ready*/
  • Вопрос задан
  • 240 просмотров
Решения вопроса 2
GeneMoss
@GeneMoss
void
Как-нибудь так:
<div class="block">
	<div class="block__slide"></div>
	<div class="block__modal">Контент-1</div>
</div>
<div class="block">
	<div class="block__slide"></div>
	<div class="block__modal">Контент-2</div>
</div>
$("body").on('click', '.block__slide', function(){
	$(this).parent('.block').find('.block__modal')
		.fadeIn("slow")
		.css({display: "flex"});
});
Ответ написан
KorniloFF
@KorniloFF Куратор тега JavaScript
Работаю по font-end / JS
Это элементарная задача на использование объекта события, передаваемого первым аргументом в любую функцию обработчика. У этого события есть свойство - мишень события. Используя его мы делаем следующее:

<div id=map>
	<div class="bface-slide-1"></div>
	<div class="modal-wrapper modal-1">
		Контент-1
	</div>

	<div class="bface-slide-2"></div>
	<div class="modal-wrapper modal-2">
		Контент-2
	</div>

	<div class="bface-slide-3"></div>
	<div class="modal-wrapper modal-3">
		Контент-3
	</div>
</div>


<script>
	// to hell jQuery!
document.getElementById('map').addEventListener('click', function (e) {
	var t= e.target; // Объект - инициатор события
	t.style.cursor='pointer';
	if(/modal\-wrapper/i.test(t.className)) alert(t.className);
});
</script>


Пример работы.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@Otrivin
junior full-stack сисадмин
Изи. Добавь к каждому элементу класс, который будет служить маркером, в скрипте указывай его.

Ну типа
<div class="bface-slide-1 marker-class">

$("body").on('click','.marker-class',function () {
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы