请假审批系统：foreach循环中Leave ID传至JS及取值失效问题

我来帮你搞定这个问题！你的核心问题有两个：一是循环里的按钮没把Leave ID绑定到data属性上，导致JS拿不到值；二是模态框里的PHP变量$row不在循环范围内，显示的永远是最后一条申请的信息。咱们一步步修改：

1. 修复循环中按钮的Data属性 #

原来的「View Request」按钮没有携带Leave ID的data-id属性，所以点击时JS无法获取对应申请的ID。修改循环里的按钮，把请假ID和其他需要展示的信息都绑定到data-*属性中：

<?php foreach ($leave as $row) { 
    echo ' 
    <ul class="list-unstyled"> 
        <li class="media border-bottom border-top py-3"> 
            <img class="mr-3" src="http://via.placeholder.com/64x64" alt="Generic placeholder image"> 
            <div class="media-body"> 
                <h5 class="mt-0 mb-1">'.$row->user_name.'</h5> 
                <p class="mb-0 mt-0">'.$row->leave_start.' to '.$row->leave_end.'</p> 
                <p class="mt-0">'.$row->leave_type.'</p> 
                <p class="mt-0">'.$row->id.'</p> 
                <!-- 新增data-*属性，传递请假ID和其他信息 -->
                <button type="button" class="btn btn-primary btn-sm" 
                        data-toggle="modal" 
                        data-target="#pedingLeaveRequest" 
                        data-id="'.$row->id.'" 
                        data-username="'.$row->user_name.'" 
                        data-leave-start="'.$row->leave_start.'" 
                        data-leave-end="'.$row->leave_end.'" 
                        data-leave-type="'.$row->leave_type.'">
                    View Request
                </button> 
            </div> 
        </li> 
    </ul> 
    '; 
} ?>

2. 动态更新模态框内容 #

原来的模态框直接用<?php echo $row->user_name; ?>，但$row在循环外部，只会显示最后一条申请的信息。我们把模态框里的内容改成占位符，通过JS动态填充：

<!-- Modal -->
<div class="modal fade" id="pedingLeaveRequest" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Leave Request</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-12 mb-3">
                        <p class="mt-0 mb-1 font-weight-bold">Name</p>
                        <!-- 用ID作为占位符，后续JS填充 -->
                        <p class="mt-0 mb-0" id="modal-username"></p>
                    </div>
                    <div class="col-12 mb-3">
                        <p class="mt-0 mb-1 font-weight-bold">Leave Period</p>
                        <p class="mt-0 mb-0" id="modal-leave-period"></p>
                    </div>
                    <div class="col-12 mb-3">
                        <p class="mt-0 mb-1 font-weight-bold">Leave Type</p>
                        <p class="mt-0 mb-0" id="modal-leave-type"></p>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <!-- 给隐藏输入框加ID，方便JS精准选中 -->
                <input type="hidden" id="current_leave_id" name="current_leave_id" value=""/>
                <button type="button" id="declinebtn" class="btn btn-secondary" data-dismiss="modal">Decline</button>
                <button type="button" id="approvebtn" class="btn btn-primary">Approve</button>
            </div>
        </div>
    </div>
</div>

3. 完善JS逻辑，确保ID正确传递 #

修改JS代码，在模态框弹出时，不仅设置隐藏框的Leave ID，还要更新模态框里的所有申请信息，同时确保点击「Approve」时能正确获取ID：

$(function(){ 
    var BASE_URL = "http://localhost/employeemgt/index.php/"; 

    $('#pedingLeaveRequest').on('show.bs.modal', function(event) { 
        var button = $(event.relatedTarget); 
        // 从按钮的data属性中获取所有信息
        var current_leave_id = button.data('id');
        var username = button.data('username');
        var leaveStart = button.data('leave-start');
        var leaveEnd = button.data('leave-end');
        var leaveType = button.data('leave-type');

        var modal = $(this); 
        // 更新模态框内容
        modal.find('#modal-username').text(username);
        modal.find('#modal-leave-period').text(leaveStart + ' to ' + leaveEnd);
        modal.find('#modal-leave-type').text(leaveType);
        // 设置隐藏框的ID值
        modal.find('#current_leave_id').val(current_leave_id);
        alert(current_leave_id); // 现在应该能正确弹出ID了
    }); 

    $('#approvebtn').click(function(){ 
        // 通过ID选中隐藏框，获取值
        var id = $('#current_leave_id').val(); 
        alert(id); // 现在能正确获取ID了
        $.post(BASE_URL + 'admin/AdminDashboardController/approveLeave', {'id': id}, function(result){ 
            console.log(result); 
            if(result.error){ 
                alert('try again'); 
            }else{ 
                alert('Leave has been approved!'); 
                // 可以在这里刷新页面或者更新列表，移除已审批的申请
                location.reload();
            } 
        }); 
    }); 
});

为什么原来的代码不行？ #

• 循环中的按钮没有data-id属性，导致button.data('id')返回undefined，隐藏框的值无法设置；
• 模态框里的$row变量不在foreach循环内，只能取到最后一次循环的$row数据；
• 用$('input[name="current_leave_id"]')选中元素可能存在歧义（如果页面有多个同名输入框），用ID选中更可靠。

这样修改后，点击每个「View Request」按钮，模态框会显示对应申请的详细信息，隐藏框也会正确设置对应的Leave ID，点击「Approve」按钮就能把正确的ID传给后端接口了。

内容的提问来源于stack exchange，提问作者shavindip