Как сделать индивидуальное событие по нажатию для блоков с одинаковыми классами?

Question

[exdude]

Есть перечень блоков с классом box.
При нажатии на него должно появляется модальное окно с индивидуальной информацией для этого блока.
С помощью цикла for и Class Selector уже получилось сменить фон блоков.
Но как сделать так что бы при нажатии, подменялся текст модального окна в соответствии по нажатому блоку?
Что бы не засорять html страницу пару сотней кода

Comments

[WapSter]

Прочитать про контекст в js

Answer 1

[diqueff]

о каких сотнях идет речь?
для каждого элемента - свой класс (ну или псевдоэлементы используй) и дело с концом

Comments

[exdude]

В html:

<div class="box"> </div>
<div class="box"> </div>
<div class="box"> </div>
<div class="box"> </div>
<div class="box"> </div>
<div class="box"> </div>

В js:

let gbox = $("[class='box']");
for (i=0; i < gbox.length; i++) {
	console.log(i);
	$(gbox[i]).css('backgroundImage', 'url(img/bg-'+ i +'.jpg)');
	$(gbox[i]).on('click',
		 function () {
		console.log('well' + i);
	});
};

Answer 2

[hzzzzl]

можно добавить один data-атрибут, а всю информацию хранить в JS (или делать запрос на сервер)

Comments

[exdude]

Спасибо, это более подходящий вариант!
Можно еще один вопрос?
Сейчас я в основном храню информацию в объектах. Соответственно всю информацию от туда вытаскиваю циклами, что не удобно. Но куда надо копать что бы, выводить инфу в виде объекта с баз данных (mysql), и как правильно научится отправлять/получать запросы на сервер? Просто опыт пока только с фронтом, без бека, но очень хочется научится)

[hzzzzl]

чтобы

выводить инфу в виде объекта с баз данных (mysql)

придется

отправлять/получать запросы на сервер

то есть да, придется поднять сервер на php или node.js или еще чем-либо, делать запрос на него, и уже оттуда получать всю инфу
https://developer.mozilla.org/ru/docs/Web/API/Fetch_API

а серверный язык это уже другой вопрос :)
если выбрать PHP, то я бы рекомендовал погуглить XAMPP - там будет из коробки всё что нужно включая mysql
https://ipipe.ru/info/ustanovka-xampp

--

для обучения можно поискать по слову "открытые api", то есть уже готовые сервера, которые тебе будут по запросам отдавать информацию
https://apptractor.ru/info/articles/10-rest-api.html

вот например получаешь инфу о юзерах
https://reqres.in/
https://reqres.in/api/users?page=1

[exdude]

Хорошо. Спасибо за ответ!

[hzzzzl]

exdude,

[exdude]

hzzzzl, мне уже непонятна логика после после запроса на сервер:D Ну ладно разберусь, спасибо!