Отображение поля из базы данных с уникальным html id

Question

У меня есть проект PHP Laravel, в котором я получаю идентификаторы из базы данных. Я хотел бы щелкнуть эти идентификаторы Dynami c и отобразить содержимое Dynami c, поступающее из базы данных. html выглядит так:

    <div class="details" id="plusBtn-{{$ticket->id}}">
       Click Icon
    </div>

Идентификатор указанного выше элемента будет plusBtn-1, plusBtn-2, et c, который поступает из базы данных ... Когда пользователь щелкает мышью на «Щелкните значок», интерфейсная часть должна отображать следующее из базы данных:

    <div class="ticketDetail">
       <p>Contact: {{$ticket->tel}}</p>
       {{$ticket->description}}
    </div>

Javascript до сих пор выдает в консоли идентификатор .details всякий раз, когда вы нажимаете на «Щелкните значок ":

$(".details[id]").each(function() {
        let plusBtnArr = [];
        plusBtnArr.push(this);
        for (let i = 0; i < plusBtnArr.length; i++) {
            var elementId = plusBtnArr;
            $(elementId).click(() => {
                console.log(elementId);
            });
        }
    });

Я не хочу тратить время зря, так как уверен, что вопрос, похожий на мой, вероятно, был опубликован в истории inte rnet. Я пытался три дня и не могу найти способ сделать это. Спасибо за ваше время.

Answer 1

Самое простое решение - заранее отрисовать детали всех билетов. Давайте проверим этот фрагмент кода:

<div class="ticketDetail hidden" id="ticketDetail-{{$ticket->id}}">
  <p>Contact: {{$ticket->tel}}</p>
  {{$ticket->description}}
</div>

.hidden {
  display: none;
}

Теперь у нас есть детали билета с прикрепленным идентификатором. Визуализируйте детали всех билетов в дереве DOM.

При щелчке по значку нам нужно каким-то образом получить идентификатор билета. Я бы посоветовал прикрепить его отдельно:

<div class="details" id="plusBtn-{{$ticket->id}}" data-ticketId="{{$ticket->id}}">
  Click Icon
</div>

Теперь мы можем использовать его для поиска подходящего билета:

const element = $(elementId);
element.click(() => {
  const ticketId = element.attr('data-ticketId');
  const ticketDetail = $(`#ticketDetail-${ticketId}`);
  ticketDetail.removeClass('hidden');
});

Надеюсь, это поможет :)