如何从 Laravel 8 中的 @foreach 刀片传递数据以编辑模式

Question

我想在同一页面中有一个编辑模式。我有一个记录清单。

这里是来自 partners.blade.php 视图的代码 sn-p。

@foreach($partners as $partner)
  <td>
    <a href="#" onclick="edit_partner()"
      data-target="#edit_partner"
      data-toggle="modal"
      data-id="{{$partner->id}}"
      data-full_name="{{$partner->full_name}}"
      data-code="{{$partner->code}}" ...
      >{{$partner->full_name}}</a>
    </td>

以及我想从中编辑伙伴的模态：

<div id="edit_partner" class="modal fade">... </div>

这里是jquery代码：

function edit_partner() {
    $('#edit_partner').on('show', function(e) {
        var link = e.target(),
            modal = $(this),
            full_name = link.data('full_name'),
            code = link.data('code'), ...

        modal.find('#full_name').val(full_name);
        modal.find('#code').val(code); ...
    });
}

我想要这个： 当我点击合作伙伴的全名时，它应该会打开一个包含合作伙伴信息的模式，我可以编辑此信息。

这是我尝试过的：

1.我使用了这段代码，但它总是返回最后一个伙伴。

2.我试过这个：

<div id="edit_partner_{{$partner->id}}" class="modal fade">... </div> 

和

 data-target="#edit_partner_{{$partner->id}}"

但这一次，当我点击全名时，它并没有打开模式。当我单击最后一个合作伙伴时，它会打开包含合作伙伴信息的模式。

Answer 1

您可以在edit_partner 函数中传递this，然后使用它来获取数据属性值并将其传递给您的模态输入。

演示代码：

function edit_partner(el) {
  var link = $(el) //refer `a` tag which is clicked
  var modal = $("#edit_partner") //your modal
  var full_name = link.data('full_name')
  var code = link.data('code')
  modal.find('#full_name').val(full_name);
  modal.find('#code').val(code);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<table>
  <tr>
    <td>
      <!-- pass this inside function-->
      <a href="#" onclick="edit_partner(this)" data-target="#edit_partner" data-toggle="modal" data-id="{{$partner->id}}" data-full_name="abc" data-code="1">abc</a>
    </td>
  </tr>
  <tr>
    <td>
      <a href="#" onclick="edit_partner(this)" data-target="#edit_partner" data-toggle="modal" data-id="{{$partner->id}}" data-full_name="abc2" data-code="2">abc2</a>
    </td>
  </tr>
</table>

<div class="modal fade" id="edit_partner" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
        <input type="text" id="full_name">
        <input type="text" id="code">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>