Question

TLDR

我希望下面的脚本返回按钮单击的表格行的<input id和value。现在它始终只返回第一行的信息，无论哪一行按钮在。

我认为我想做的事情很简单，而我认为我非常接近。但这对我来说都是一个学习过程，因此可能可能可能是我犯了一个初学者的错误。

我正在建造一个购物车。我有一个在foreach循环中构建的表行。基本要点是这样的（使用刀片）：

<?php $i = 0; ?>
@foreach($cart as $c)
    <tr class="row-item">
        <td>{{ $c['name'] }}</td>
        <td>{{ $c['price'] }}</td>
        <td><input type="text" class="quantity" id="{{ $c['rowid'] }}" value="{{ $c['qty'] }}"></td>
        <td><button class="btn-remove" id="remove{{ $i }}" name="removeItem"></button></td>
    </tr>
    <?php $i++ ?>
@endforeach

此循环中创建的所有行都在表单中。我已经有一个这个表单的提交按钮（在循环外）来更新数量。

我最终要做的是是将表行的'删除'按钮设置为特定行的数量字段为零并提交表单（通过现有表单提交按钮）），从而从购物车中“移除”物品。这可以通过将数量字段设置为零来手动完成，我只是认为应该有一个删除按钮，正如大多数人所期望的那样。

我要做的第一步是返回按钮点击的表格行的<input id和value。

我的脚本如下：

$(document).ready(function() {

    $(".row-item").each(function(i) {

        var fieldValue = $(".quantity").val();
        var fieldId = $(".quantity").attr('id');

        $("#remove" + i).click(function(e) {

            console.log(fieldValue, fieldId);

            e.preventDefault();
        });
    });
});

这有效......有点儿。无论我单击哪一行的删除按钮，控制台都会显示第一个.row-item的信息。

4 2e9f9685813dee35a13376eccb21431b

那很好。这基本上就是我追求的目标。我可以稍后处理这些信息，我只需先获取相应的信息：）

但如果我点击另一行的删除按钮，我会得到完全相同的东西。很明显，我的迭代没有按照我的意愿工作。

Fiddle here

_{我不得不对小提琴中的一些变量进行硬编码}

修改

好的，this answer的作用是我可以将所有各种数据输入控制台。那是进步！但是我还不确定如何在我的“删除”按钮中使用它......

Answer 1

您可以通过使用jQuery遍历DOM而不是迭代并以这种方式查找内容来轻松完成此任务。

这是一些有效的代码和updated fiddle：

$(document).ready(function () {

    $('#product-table').on( 'click', '.btn-remove', function( event ) {
        var $tr = $(this).closest('tr');
        $tr.find('.quantity').val( '0' );
        $tr.find('.total').text( '0.00' );
        // Submit your form here
    });
});

此代码使用事件委派，因此它只添加一个事件侦听器来处理删除按钮的所有。

我对您的HTML进行了一些更改以使用此代码：

将id="product-table"添加到主<table>。
为每个“总”class="total"元素添加了<strong>。

使用jQuery each（）使用该行上的按钮提取表行数据

1 个答案: