javascript - 将变量 id 传递到 Modal

Question

我使用此代码将 foreach 循环中的 ID 列表加载到模态中。我遇到的问题是，仅填充第一个 ID，而不填充单击元素的 ID。在约会 ID 上设置的正确变量是什么，以便加载相关 ID。

$('#appointmentModal').on('show.bs.modal', function(e) {
        //get data-id attribute of the clicked element
        var appointmentID = ($('[data-id]').val()); 
        //populate the textbox
        $(e.currentTarget).find('input[name="appointmentID"]').val(appointmentID);
        });

按钮

<button type="button" class="btn btn-sm btn-teal " data-toggle="modal" data-target="#appointmentModal" data-appointment="{{ $item->appointmentID }}" data-id="{{ $item->appointmentID }}" id="appointmentID" value="{{ $item->appointmentID }}">
            <i class="fa fa-edit"></i> {{ trans('translate.edit') }} 
            </button>   

Answer 1

建议:

我建议像这样获取DOM元素的值:

$(document).ready(function() {
    $('.btn-teal').click(function() {
        // 1) Use .attr() method to get the given value based on what [attribute] (e.g data-id)
        // This will get the appointment value of the element click
        var appointmentID = $(this).attr('data-id'); 

        // 2) Then by the time you open the modal, You can assign it
        // on another DOM element
        $('#appointmentModal').find('input[name="appointmentID"]').val(appointmentID);

        // 3) After assigning it, Open that modal box
        $('#appointmentModal').modal('show');
    });
});

希望这对您的情况有所帮助