javascript - jQuery 从输入文本中获取错误数据

Question

我尝试使用 jQuery 从输入文本中获取值，但我只获取了第一个值。输入文本是循环的。

这是 HTML:

<div class="item-container-add">
    @foreach($cartCollection as $cart)
        @if($cart['name'] != 'asdfghjklkjgfds123890')
            <div class="row row-add mr-1">

                <div class="col-sm-6">
                    <input type="text" class="id_delete" name="id_delete" id="id_delete" value="{{ $cart['id'] }}">
                </div>

                <div class="col-sm-2 border-cart">
                    <button class="btn btn-del delete_button" name="delete_button" type="submit">Hapus<img class="icon-delete" src="./svg/delete.svg"></button>
                </div>

            </div>
        @endif
    @endforeach
</div>

从这些 HTML 中，我得到了 4 个不同的 ID，它们都有自己的删除按钮。当我尝试单击删除时，我的 jQuery 函数仅从这些循环中获取第一个 ID。它应该在我单击按钮的地方获得 ID。这是我的 jQuery 函数:

$(document).on('click', '.delete_button', function(e) {
    var a = $("#id_delete").val();
    alert(a);
    $.ajax({
        /* some ajax function */    
    });
});

图片引用:https://imgur.com/mX1WHwM

Answer 1

首先，您需要从您在循环中创建的 HTML 元素中删除 id 属性。 id 值在 DOM 中必须是唯一的。使用元素上的通用类来选择它们。

您的问题的原因是因为在点击事件处理程序中您通过其 id 选择元素。由于这是重复项，因此只能找到具有该 id 的第一个元素，因此您只能获得第一个值。要解决此问题，您可以在点击事件处理程序中使用 this 关键字来引用引发事件的元素。然后您可以使用 DOM 遍历方法，例如 closest() 和 find()，从相关字段中检索值。试试这个:

<div class="item-container-add">
  @foreach($cartCollection as $cart)
    @if($cart['name'] != 'asdfghjklkjgfds123890')
      <div class="row row-add mr-1">
        <div class="col-sm-6">
          <input type="text" class="id_delete" name="id_delete" value="{{ $cart['id'] }}">
        </div>
        <div class="col-sm-2 border-cart">
          <button class="btn btn-del delete_button" name="delete_button" type="submit">Hapus<img class="icon-delete" src="./svg/delete.svg"></button>
        </div>
      </div>
    @endif
  @endforeach
</div>

$(document).on('click', '.delete_button', function(e) {
  var a = $(this).closest('.row').find('.id_delete').val();
  console.log(a);
});