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

Question

[Елисей Басенко]

Прошу прощения за "говнокод", сам понимаю что так не делается, но я пока не гуру в 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*/

Answer 1

[Eugene Mosyukov]

Как-нибудь так:

<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"});
});

Comments

[Eugene Mosyukov]

Вместо .parent('.block').find('.block__modal') можно использовать .next('.block__modal') — будет даже быстрее работать, но сильно зависит от структуры HTML (т. е. если разметка блока поменяется, то перестанет работать).

[Елисей Басенко]

А если модальное окно в DOM должно расолагаться вне slide то как?

[Eugene Mosyukov]

Елисей Басенко: так оно вне slide, но внутри block.

[Елисей Басенко]

Всё получилось. Вроде быстро работает.

У меня была owl карусель, по клику на слайд нужно было сделать что бы слайд переворачивался,
показывая минимум текстовой информации, но если хочется почитать подробнее, должно появляться модальное окно с развёрнутой информацией для конкретного слайда.
Всё кроме модального окна заработало с вашим методом)
Проблема была в том, что специфика использования owl карусели не давала нормально отобразить модальное окно. position: fixed не работал.))
По этому в DOM документа модальное окно пришлось расположить вне слайдов и самого слайдера, причем всего одно единственное.
А данные для модального окна просто подставлять в него при открытии, через метод копирования заранее скрытых (display: none) блоков из текущего слайда))

$(this).find('.slide__content').clone().appendTo('.modal__content');

Мб снова топорно, но меня такой вариант уже устраивает))
Теперь не нужно прописывать селекторы при добавлении новых элементов, содержащих свою информацию, то-есть размер кода и гемороя больше не зависит от количества html объектов, (не раздувается).
Каждый HTML объект обрабатывается индивидуально и в модальном окне показывается нужная информация из нужного объекта.

Супер. Спасибо за помощь:)

Answer 2

[Павел Корнилов]

Это элементарная задача на использование объекта события, передаваемого первым аргументом в любую функцию обработчика. У этого события есть свойство - мишень события. Используя его мы делаем следующее:

<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>

Пример работы.

Answer 3

[Otrivin]

Изи. Добавь к каждому элементу класс, который будет служить маркером, в скрипте указывай его.

Ну типа

<div class="bface-slide-1 marker-class">

$("body").on('click','.marker-class',function () {

Comments

[Елисей Басенко]

Ты не понял суть вопроса) Если так написать, то эффект при обработке события будет применён ко всем промаркированным элементам сразу. А нужно по одному.