Как найти ноду, если нет уникального селектора

Question

Всем доброго времени суток! Возникла проблема. Делаю запрос на сервер, получаю данные. Массив объектов вида {name: , gender: , id: , ...}. По получению данных нужно отрендерить 10 карточек на странице. Есть структура карточки. Полученные данные засовываю в массив, потом методом .reduce возвращаю структуру для всех десяти карточек и с помощью .insertAdjacentHTML добавляю на страницу. Получается вот такая структура

<div class="requests__cards-card ">
    <div class="requests__cards-imgBlock">
        <img alt="#">
    </div>
    <div class="requests__cards-descr">
        <div class="requests__bearName"></div> 
        <div class="requests__bearTypeNGender"></div>
        <div class="requests__bearTypeNGender"></div>
    </div>
    <div class="requests__cards-btns">
        <button class="btn--accept"></button>
        <button class="btn--reject"></button>
    </div>
</div>

<div class="requests__cards-card ">
    <div class="requests__cards-imgBlock">
        <img alt="#">
    </div>
    <div class="requests__cards-descr">
        <div class="requests__bearName"></div> 
        <div class="requests__bearTypeNGender"></div>
        <div class="requests__bearTypeNGender"></div>
    </div>
    <div class="requests__cards-btns">
        <button class="btn--accept"></button>
        <button class="btn--reject"></button>
    </div>
</div>

<div class="requests__cards-card ">
    <div class="requests__cards-imgBlock">
        <img alt="#">
    </div>
    <div class="requests__cards-descr">
        <div class="requests__bearName"></div> 
        <div class="requests__bearTypeNGender"></div>
        <div class="requests__bearTypeNGender"></div>
    </div>
    <div class="requests__cards-btns">
        <button class="btn--accept"></button>
        <button class="btn--reject"></button>
    </div>
</div>

...

Дальше на каждую карточку нужно навесить обработчик событий. Кликая на карточку должна появляться большая карточка с доп информацией, которая берется из массива. Так вот проблема заключается в том что уникального селектора на карточках нет, классы все одинаковые. Как находить нужную ноду? До возникновения этой проблемы давал каждой карточке id, после чего навешивал обработчик

array.forEach(item => {
  const card = document.getElementById(item.id)
  card.addEventListener('click', () => renderBigCard)
})

Однако кое-кто сказал мне, что "плодить" айдишники - это плохой тон) Поэтому я их убрал, но полностью отсутствуют в голове идеи, как бы решить эту проблему не используя уникальных селекторов. Может есть у кого какие идеи? Скриншот функции, собирающих карточку

UPD Пришла в голову идея записывать ноду в массив. Т.е. я нахожу все ноды своих карточек, после чего для каждого элемента массива добавляю параметр item.node и уже на него вешаю обработчик события. Пример кода ниже

const nodes = document.querySelectorAll('.requests__cards-card')
    bearsArr.forEach(item => {
        item.node = nodes[item.id-1]
        item.node.addEventListener('click', ()=>{
            renderBigCard(item)
        })
    })

Answer 1

У меня есть кое какая идея. Необходимо помещать карточки в некий контейнер назовём его wrapper. И к этому контейнеру подключим обработчик событий. И при помощи делигирования обрабатываем события клик только на нужном нам элементе.

const wr = document.getElementById('wrapper');

wr.addEventListener('click', e => {
  if (e.target.classList.contains('requests__cards-card')){
    if (e.target.style.backgroundColor === 'green' || e.target.style.backgroundColor === '') {
      e.target.style.backgroundColor = 'red';
    } else {
      e.target.style.backgroundColor = 'green';
    }
    console.log(e.target.children[0].textContent);
  }
});

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
}

.requests__cards-card {
  width: 200px;
  height: 250px;
  background-color: green;
  color: #ffffff;
  padding: 10px;
}

<div id="wrapper" class="wrapper">
  <div class="requests__cards-card ">
    <p>Карточка 1</p>
  </div>
  <div class="requests__cards-card ">
    <p>Карточка 2</p>
  </div>
  <div class="requests__cards-card ">
    <p>Карточка 3</p>
  </div>
</div>

БЛОГ НА HUSL

Как найти ноду, если нет уникального селектора

Ответы (1 шт):