如何将模板内循环中的值传递给jquery

Question

我希望将循环中的值传递到查询中。我列了一张戒指的清单，并在树枝上展示了使用循环的戒指。当我点击Anker的时候，我想编辑其中一个。

这是我的树枝

        {% set ring_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>
            {%set ring_id = ring.id %}
            
            <td><a href="#" id='ring_delete' >Delete</a></td>
            
        </tr>
        {% endfor %}

这是我的问题

  <script>

$(function() {
    var ring_id = "{{ring_id}}";
    $('#ring_delete').on('click', function(e) {
     $.ajax({
            url: "{{ url('admin_product_custom_delete_ring') }}",
            type: "POST",
            dataType: 'json',
            data: { 
            },
            async: false
        }).done(function(data){
            alert('check' + data);
        }).fail(function(){
            alert("no");
        })

    });
 </script>

因此，我想删除我选择的戒指，将ring_id传递给url。但是，它说ring_id不存在，尽管我添加了{%set ring_id %}。如何使用细枝在循环中传递值到jquery中？

Answer 1

尝试使用数据属性。

<a href="#" class="ring_delete" data-id="{{ ring.id }}">Delete</a>

$('.ring_delete').on('click', function(e) {
  var ring_id = $(this).data('id');

还请注意，我将ring_delete从id更改为类。这是因为ids必须是唯一的，而且只有一个具有该名称。因为它在一个循环中，并且将是多个，所以我们应该使用类来引用。