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

我试图用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元素中删除id属性。id值在DOM中必须是唯一的。使用元素上的公共类来选择它们

出现问题的原因是，在click事件处理程序中，您是通过id选择元素的。由于这是重复的，因此只会找到具有该id的第一个元素，因此您只能获得第一个值。要解决这个问题，可以在click事件处理程序中使用this关键字来引用引发事件的元素。然后，您可以使用DOM遍历方法（如最近和查找）从相关字段中检索值。试试这个：

@foreach$cartCollection作为$cart @如果$cart['name']！='asdfghjklkjgfds123890' 哈布斯 @恩迪夫 @endforeach $document.on'click'，'delete_按钮'，函数E{ var a=$this.closest'.row'.find'.id_delete'.val； console.loga； };

---

首先，ID必须是唯一的。您可以重构代码，如下所示

$(document).on('click', '.delete_button', function(e) {
  var val = $(this).val();
  var id = $(this).attr('id');
  console.log(val, id);
});

---

这将使用您单击的按钮，并查找最近的祖先匹配。行，查找子代以查找匹配的输入。

每个页面的ID必须唯一，现在每个迭代的循环中都有相同的ID。JS选择器将始终只获取ID为的第一个元素，并且永远不会看到其他元素。SID应始终是唯一的，不要重复ID.var a=$ID\u delete.val；将始终仅获取与此匹配的第一个元素。这是故意的。您要做的是使用可用的jquery工具在单击的按钮上查找匹配的输入$这是最近的.row.find'input.id_delete'；类似于该按钮的内容没有val。可能$this.closest.row.find.id\u delete.val？

$(document).on('click', '.delete_button', function(e) {
  var val = $(this).val();
  var id = $(this).attr('id');
  console.log(val, id);
});

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