Как сделать чтобы автоматически определялось какие данные брать из массива. JS, jQuery?

Question

[Дмитрий Пляскин]

Абстрактный пример для описания механизма:
Имеется массив с неопределенным количеством данных. Данные можно удалять/добавлять (не важно).
arr = [{h1: 'Lorum 1',
p: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.'},
{h1: 'Lorim 2',
p: 'Lorum ipsum dolor sit amet, consectetur adipisicing elit.'},
{... и так далее}];
(массив для примера)

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

Сам вопрос:
Как сделать так, чтобы, до пустим, при добавлении пользователем новых данных в массив, появлялась новая кнопка, которая открывала popup с этими данными.
т.е. кнопка была привязана к определенному элементу массива, но при этом, чтобы путь на эти данные определялся автоматически.

Еще пример для понимания:
arr = [0, 1, 2, 3, ...]
при нажатии button1, отображаются данные которые содержатся в первом элементе массива. (знаю что отсчет ведется с 0)
при нажатии button2, отображаются данные, которые содержатся во втором элементе массива.
Я добавляю button3(до пустим в HTML) и при нажатии, она должна автоматически отобразить данные, которые содержатся в третьем элементе массива.
и т.д.

Думаю понятно расписал, что требуется.
Желательно на чистом js показать, как такое можно реализовать, ну или хотя бы подсказать в каком направлении искать.

Comments

[Kovalsky]

Вариантов-то много: data-атрибуты, замыкания и т.д. Самый топорный - просто индекс сохранять в объекте элемента.

var arr = [ 1, 2, 3, 4, 5 ],
    target_class = 'lol';

document.querySelectorAll('.' + target_class).forEach((el, i) => el.i = i);

window.addEventListener('click', function(e) {
    if (e.target.classList.contains( target_class )) {
        console.log( arr[ e.target.i ] );
    }
});

Ну или весь целевой объект привязывать к элементу, как-то так.

[Дмитрий Пляскин]

Никита Полевой, если не сложно, можете пояснить этот момент .forEach((el, i) => el.i = i), не понимаю, что тут происходит.

[Kovalsky]

Дмитрий Пляскин,

document.querySelectorAll('.' + target_class).forEach(function(element, index) {
    element.custom_index = index;
});

А так? Только тогда в обработчике тоже надо будет обращаться к custom_index, а не к i

[Дмитрий Пляскин]

Никита Полевой, спасибо, теперь понятнее стало.

Answer 1

[Константин Боровик]

Как сделать так, чтобы, до пустим, при добавлении пользователем новых данных в массив, появлялась новая кнопка, которая открывала popup с этими данными.

в ваше функцию добавления данных в массив ещё прикрепите добавление новой кнопки.

кнопка была привязана к определенному элементу массива, но при этом, чтобы путь на эти данные определялся автоматически.

если у вас кнопки упорядочены как и элементы массива, то через событие берёте индекс кнопки и ищите элемент в массиве по индексу. Как-то так:

$('блок с кнопками').on('click','button',function(){
var curr_elem = arr[$(this).index()];
//дальше делаете, что вам нужно.
});

Насчёт чистого js сами уже пробуйте =)