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，带有自己的删除按钮。当我尝试单击Delete时，我的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);
});

Answer 2

首先，ID必须是唯一的。您可以按以下方式重构代码。

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

Answer 3

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

它采用您单击的按钮this，并找到与.row匹配的最接近的祖先，浏览后代以找到匹配的输入。

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

3 个答案: