javascript - laravel javascript 单击后为表中的所有按钮获取相同的 id

Question

我的表格中有按钮，例如:

@foreach($orders as $order)
<tr>
  //other td's...
  <td><button class="btn btn-block btn-theme02 pay-button" id="{{$order->id}}" type="submit">Pay!</button></td>
</tr>
@endforeach

JavaScript 如下:

<script type="text/javascript">
  $('.pay-button').click(function (event) {
    $.ajaxSetup({
        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
      });
    event.preventDefault();
    // $(this).attr("disabled", "disabled");
    var prdfoId = $(".kghgh").val();
        $.ajax({
          url: '{{url("orderspayonline")}}/'+encodeURI(prdfoId),
          type: "POST",
          cache: false,

          success: function(data) {
//codes...
}
});
    });
</script>

问题是我在所有 tr 中的付款按钮都获得相同的订单 ID。

I mean If my order id is 1 i get 5 and if my order id is 2 i get 5 and so on. (5 is latest order id in database)

Answer 1

完成此类任务的最佳方法是使用数据属性。将 id="{{$order->id}}" 更改为 data-id="{{$order->id}}" 即可获取特定 id通过在 jQuery 中调用 $(this).data('id') 。见下文:

@foreach($orders as $order)
<tr>
  //other td's...
  <td><button class="btn btn-block btn-theme02 pay-button" data-id="{{$order->id}}" type="submit">Pay!</button></td>
</tr>
@endforeach

JS代码:

<script type="text/javascript">
  $('.pay-button').click(function (event) {
    var prdfoId = $(this).data('id');
    $.ajaxSetup({
        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
      });
    event.preventDefault();
    // $(this).attr("disabled", "disabled");
        $.ajax({
          url: '{{url("orderspayonline")}}/'+encodeURI(prdfoId),
          type: "POST",
          cache: false,

          success: function(data) {
//codes...
}
});
    });
</script>