Получить элемент DOM, который был создан в цикле foreach - PullRequest
Новая
       3

Получить элемент DOM, который был создан в цикле foreach

2 голосов
/ 18 января 2020

У меня есть приложение узла, и у меня есть шаблон мопса, который закодирован, шаблон мопса представляет один проект, и в нем показаны связанные цели (так, отношение один ко многим - у одного проекта может быть много целей).

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

each target in project.targets
           .target__card
              .target__avatar
                 h6.target__title= target.title
                 input#targetId(type='hidden' value=`${target._id}`)

Так что у меня там есть мой скрытый идентификатор, и он весь персиковый. Я хочу иметь возможность щелкнуть по нему, и он откроет форму, которая может отредактировать его и затем отправить в мою конечную точку. Но если у меня есть javascript функция, подобная этой: 

const targetCard = document.querySelector('.target__card')

if (targetCard) {
          targetCard.addEventListener('click', async (e) => {
             const target = document.getElementById('targetId').value
             console.log('target is ', target)
  })
}

, то это будет работать только для первого элемента DOM. Но мне действительно нужно снова пройти через oop в моем javascript или что-то в этом роде? Я уже зацикливаюсь на шаблоне, и информация уже «просто сидит», я вижу это. Кажется, расточительно провести через нее oop снова в функции js, даже если бы я знал лучший способ сделать это (что я не уверен, что я делаю). Есть ли что-то очевидное, чего мне не хватает? Могу ли я встроить форму в каждый элемент, который можно просто скрыть и скрыть? Это тоже немного расточительно.

...