从唯一的 html id 显示数据库中的字段

Question

我有一个 PHP Laravel 项目，我在其中从数据库中获取一些 ID。我想单击这些动态 ID 并显示来自数据库的动态内容。html 看起来像这样：

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

       Click Icon

    </div>

上述元素的 ID 为 plusBtn-1、plusBtn-2 等，它们来自数据库……当用户单击“单击图标”时，前端应显示来自数据库的以下内容：

    <div class="ticketDetail">

       <p>Contact: {{$ticket->tel}}</p>

       {{$ticket->description}}

    </div>

到目前为止，只要您单击“单击图标”，Javascript 就会显示 .details 的 ID：

$(".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);

            });

        }

    });

我并不是要浪费任何人的时间，因为我确定互联网历史上可能已经发布了与我类似的问题。我已经尝试了三天，但找不到方法来做到这一点。感谢您的时间。

Answer 1

最简单的解决方案似乎是预先呈现所有票证的详细信息。让我们检查一下这段代码：<div class="ticketDetail hidden" id="ticketDetail-{{$ticket->id}}">&nbsp; <p>Contact: {{$ticket->tel}}</p>&nbsp; {{$ticket->description}}</div>.hidden {&nbsp; display: none;}现在我们有了附有 ID 的工单的详细信息。呈现 DOM 树中所有票证的详细信息。单击图标时，我们需要以某种方式获取票证的 ID。我建议单独附上：<div class="details" id="plusBtn-{{$ticket->id}}" data-ticketId="{{$ticket->id}}">&nbsp; Click Icon</div>现在我们可以用它来找到合适的票：const element = $(elementId);element.click(() => {&nbsp; const ticketId = element.attr('data-ticketId');&nbsp; const ticketDetail = $(`#ticketDetail-${ticketId}`);&nbsp; ticketDetail.removeClass('hidden');});我希望这有帮助 ：）