在Django中通过Bootstrap模态框传递review.id实现评论删除

方案一：使用JavaScript动态修改删除链接（推荐，适合多评论场景） #

这种方法只需要一个模态框，通过JS动态获取触发按钮的review.id并更新删除链接，避免重复渲染多个模态框。

1. 修改触发删除的按钮：添加data-review-id属性存储当前评论的ID

{% if request.user.is_authenticated and user.username == review.name or user.is_superuser %}
    <div>
        <a class="btn btn-black rounded-0 text-uppercase mt-2" href="{% url 'edit_review' review.id %}" role="button">Edit</a> |
        <!-- 新增data-review-id属性 -->
        <a class="btn-delete btn rounded-0 text-uppercase btn-outline-danger mt-2" 
           data-toggle="modal" 
           data-target="#exampleModal" 
           data-review-id="{{ review.id }}" 
           role="button">Delete</a>
    </div>
{% endif %}

2. 修正模态框内的删除按钮：将<button>改为<a>标签（按钮不支持href属性），并添加类名用于JS选择

<!-- Modal -->
<div class="modal fade" id="exampleModal" 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">Delete Review</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Are you sure you want to <strong class="text-danger">DELETE</strong> your Review?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <!-- 改为a标签，添加delete-confirm类 -->
                <a class="btn btn-danger delete-confirm" href="#">Delete Review</a>
            </div>
        </div>
    </div>
</div>

3. 添加JavaScript代码：监听模态框的show.bs.modal事件，动态更新删除链接

<script>
$('#exampleModal').on('show.bs.modal', function (event) {
    // 获取触发模态框的按钮
    var triggerBtn = $(event.relatedTarget);
    // 从data属性中获取review.id
    var reviewId = triggerBtn.data('review-id');
    // 生成删除URL：用Django的url标签生成基础链接，替换占位的0为实际ID
    var deleteUrl = "{% url 'delete_review' 0 %}".replace('0', reviewId);
    // 更新模态框内删除按钮的href
    $(this).find('.delete-confirm').attr('href', deleteUrl);
});
</script>

方案二：为每个评论生成独立模态框（无需JS，适合评论数量少的场景） #

给每个评论分配唯一ID的模态框，触发按钮对应到自己的模态框，这样模态框内的删除链接可以直接用{% url 'delete_review' review.id %}渲染。

1. 修改触发按钮的data-target：指向当前评论专属的模态框

{% if request.user.is_authenticated and user.username == review.name or user.is_superuser %}
    <div>
        <a class="btn btn-black rounded-0 text-uppercase mt-2" href="{% url 'edit_review' review.id %}" role="button">Edit</a> |
        <!-- data-target改为唯一的模态框ID -->
        <a class="btn-delete btn rounded-0 text-uppercase btn-outline-danger mt-2" 
           data-toggle="modal" 
           data-target="#deleteModal-{{ review.id }}" 
           role="button">Delete</a>
    </div>
{% endif %}

2. 将模态框放入评论循环内：每个评论对应一个模态框，ID和标题都用review.id保证唯一

<!-- 注意：这个模态框要放在评论的循环体内部，和上面的按钮同属一个review的上下文 -->
<div class="modal fade" id="deleteModal-{{ review.id }}" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel-{{ review.id }}" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel-{{ review.id }}">Delete Review</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Are you sure you want to <strong class="text-danger">DELETE</strong> your Review?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <!-- 直接使用当前review的ID生成删除链接 -->
                <a class="btn btn-danger" href="{% url 'delete_review' review.id %}">Delete Review</a>
            </div>
        </div>
    </div>
</div>

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