如何在Twig循环中将ring_id传递给jQuery实现删除功能

问题根源 #

1. 循环里所有删除按钮使用了同一个id="ring_delete"，HTML规范要求id必须唯一，这会导致只有第一个按钮能绑定点击事件。
2. Twig循环里的ring_id是服务端变量，循环结束后只会保留最后一个戒指的id，前端JS无法直接获取每个按钮对应的独立id。

修改方案 #

1. 调整Twig模板代码

把删除按钮的id改为class，同时用自定义data-*属性存储对应戒指的id：

{% for ring in rings%}
<tr>
    <td><p>{{ ring.id }}</p></td>
    <td><p>{{ ring.ring_name }}</p></td>
    <td><p>{{ ring.ring_type }}</p></td>
    <td><p>{{ ring.ring_shape }}</p></td>
    <td><p>{{ ring.size }}</p></td>
    <td><p>{{ ring.price }}</p></td>
    <td><a href="#" class='ring_delete' data-ring-id="{{ ring.id }}">Delete</a></td>
</tr>
{% endfor %}

• 用class="ring_delete"替代id，确保所有删除按钮都能被选中并绑定事件。
• 新增data-ring-id="{{ ring.id }}"，将当前戒指的id存储在按钮的自定义属性中，前端可直接读取。

2. 修改jQuery代码

通过点击事件获取当前按钮对应的data-ring-id值，再传递给AJAX请求：

<script>
$(function() {
    $('.ring_delete').on('click', function(e) {
        // 阻止a标签默认跳转行为
        e.preventDefault();
        // 获取当前按钮对应的戒指id
        var ringId = $(this).data('ring-id');
        
        $.ajax({
            url: "{{ url('admin_product_custom_delete_ring') }}",
            type: "POST",
            dataType: 'json',
            data: { 
                ring_id: ringId // 将id传入后端接口
            },
            // 不建议使用同步请求，会阻塞页面，建议移除该配置
            // async: false
        }).done(function(data){
            alert('删除结果：' + data);
            // 可选：删除成功后移除当前行
            $(this).closest('tr').remove();
        }).fail(function(){
            alert("删除失败");
        })
    });
</script>

• 用$('.ring_delete')绑定点击事件，选中所有删除按钮。
• 点击时通过$(this).data('ring-id')获取当前按钮对应的戒指id，确保每个按钮都能拿到对应的值。
• 在AJAX的data参数中添加ring_id: ringId，将id传递给后端。
• 加上e.preventDefault()避免a标签默认的跳转行为。

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