將變量id傳遞給模態

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 element的value ：

$(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');
    });
});

希望這對您有幫助