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

【问题标题】：jQuery get wrong data from input textjQuery从输入文本中获取错误数据
【发布时间】：2019-12-13 17:49:34
【问题描述】：

我尝试使用 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

【问题讨论】：

每个页面的 ID 必须是唯一的，现在您在每次迭代的循环中都有相同的 ID。 JS 选择器将始终只获取具有 ID 的第一个元素，并且永远不会看到其他元素
id 应该是唯一的，不要重复 id。
var a = $("#id_delete").val(); 将始终只获得与此匹配的第一个元素。这是设计使然。您要做的是使用可用的 jquery 工具在您单击的按钮上找到匹配的输入。 $(this).closest('.row').find('input.id_delete'); 类似的东西

标签： javascript jquery html ajax laravel

【解决方案1】：

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

您的问题的原因是因为在单击事件处理程序中，您通过其id 选择元素。由于这是重复的，因此只找到带有 id 的第一个元素，因此您只能获得第一个值。要解决这个问题，您可以在 click 事件处理程序中使用 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);
});

【讨论】：

按钮没有val()。也许$(this).closest('.row').find('.id_delete').val()？

【解决方案2】：

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

这会使用您单击的按钮this，并找到与.row 匹配的最近祖先，然后查看后代以找到匹配的输入。

【讨论】：

【解决方案3】：

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

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

【讨论】：