有没有办法将按钮 id onClick 发送到引导模式？答案

【问题标题】：Is there a way to send button id onClick to a bootstrap modal?有没有办法将按钮 id onClick 发送到引导模式？
【发布时间】：2019-01-09 06:04:05
【问题描述】：

使用 laravel，我有一个从数据库中获取的用户详细信息列表，每条记录的末尾都有编辑和删除按钮。当我单击删除按钮时，特定记录被删除，但是当我添加一个模式时，当单击删除按钮时，会出现一个模型，但是将功能添加到模式的确认“是”按钮变得很棘手，因为无论我需要删除哪个用户，它都会删除第一条记录。单击模态按钮时如何删除被单击的用户？

我尝试为每个按钮分配当前行的 id。

    @foreach($admins as $admin)
        <tr>
            <td>{{$admin['id']}}</td>
            <td>{{$admin['name']}}</td>
            <td>{{$admin['email']}}</td>
            <td>
            <button type="button" class="btn btn-block btn-danger"  data- toggle="modal" data-target="#modal-danger" id="{{$admin['id']}}">Remove</button>
            </td>
        </tr>
    @endforeach

    <!-- The Button From Modal -->
    <button type="button" class="btn btn-outline">Remove</button>

【问题讨论】：

将此方法用于 bootstrap 和 jQuery，stackoverflow.com/questions/54104088/…

标签： javascript php bootstrap-4 laravel-5.7 adminlte

【解决方案1】：

创建一个全局变量来存储目标 id 并在单击目标行上的按钮时为其分配 id

<button type="button" class="btn btn-block btn-danger"  data- toggle="modal" data-target="#modal-danger" id="{{$admin['id']}}" onClick=someFunction({{$admin['id']}})>Remove</button>

target_id=0
function someFunction(id) {
    target_id=id
}

然后在单击模型中的删除按钮时触发另一个函数，并从中访问目标 id 的全局变量

这是我认为的最佳方式，干杯。

【讨论】：

【解决方案2】：

我是用 JS 做的。您可以使用$('#modal-danger').modal('show') 显示您的模式因此，您可以将 onClick 事件添加到填充隐藏输入的按钮。

使模态出现的按钮：

<button type="button" class="btn btn-block btn-danger" onClick="showModal({{$admin['id']}})">Remove</button>

您的隐藏输入（在您页面的某处）：

<input type="hidden" id="id-to-remove" />

您的模态按钮：

<button type="button" class="btn btn-outline" onclick="realRemove()">Remove</button>

你的 JS：

function showModal(id) {
    $('#id-to-remove').val(id);
    $('#modal-danger').modal('show');
}

function realRemove() {
    $('#modal-danger').modal('hide');
    var id = $('#id-to-remove').val();
    alert('You can now remove ID ' + id + ' from your database!');
}

这应该可以工作

【讨论】：

它看起来很有希望并且几乎可以工作。只是最后一个问题。在单击模式按钮时，我想要
code
或者如何在 realRemove() 函数中调用 HomeController@delete？ HomeController 中的删除需要 id

【解决方案3】：

由于您使用的是 jQuery，您可以使用attribute 方法获取当前点击的用户 id 并传递给 URL：

您的 HTML 按钮类

  $(".my-btn").click(function(){
   var userID = $(this).attr("data-user");

   if (typeof userID !== typeof undefined && userID !== false) {

      if(userID.length > 0) {
          // There you go the user id of the clicked user
          console.log(userID);
      }

   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="my-btn" data-user="user_id_123">Remove</button>

如果您对attr 方法https://www.w3schools.com/jquery/html_attr.asp 有更多疑问，建议您参考以下网址

【讨论】：