提取錶行與按鈕在該行目前的數據每jQuery的（）

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>元素。