从唯一的 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}}">

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

  {{$ticket->description}}

</div>

.hidden {

  display: none;

}

现在我们有了附有 ID 的工单的详细信息。呈现 DOM 树中所有票证的详细信息。

单击图标时，我们需要以某种方式获取票证的 ID。我建议单独附上：

<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');

});

我希望这有帮助 ：）