Найти поля ввода в текущей строке таблицы с классом

Question

Я создаю книжный магазин и хочу добавить необычную форму заказа jQuery. Дело в том, что пользователь должен выбрать количество книг с кнопками минус и плюс, а затем позволить JavaScript рассчитать общую сумму для этой книги.

У меня есть разметка следующим образом:

  <tr>
    <td><p>Book title</p></td>
    <td><p><a href="#" class="bookDecrement">-</a><input type="text" class="bookQuantity disabled" disabled /><a href="#" class="bookIncrement">+</a></p></td>
    <td><p><input type="text" class="bookPrice disabled" value="70" disabled /></p></td>
    <td><p>=</p></td>
    <td><p><input type="text" class="bookTotal disabled" disabled /></p></td>
  </tr>

Как мне достичь класса bookPrice и bookTotal в этой строке с помощью jQuery? Поскольку у меня несколько названий книг, мне нужно получить доступ только к входным данным, хранящимся в текущей строке.

Спасибо!

Answer 1

Это должно сделать это:

$('.bookDecrement, .bookIncrement').click(function() {

    // Get the current row
    var row = $(this).closest('tr');

    // Determine if we're adding or removing
    var increment = $(this).hasClass('bookDecrement') ? -1 : 1;

    // Get the current quantity
    var quantity = parseInt(row.find('.bookQuantity').val(), 10);
    // Adjust the quantity
    quantity += increment;
    // Quantity must be at least 0
    quantity = quantity < 0 ? 0 : quantity;

    // Get the price
    var price = parseFloat(row.find('.bookPrice').val());

    // Adjust the total
    row.find('.bookTotal').val(quantity * price);

    // Return false to prevent the link from redirecting to '#'
    return false;
});

Answer 2

Вы можете добраться до предка tr и снова спуститься к входу внутри. Как это:

$("a.bookIncrement").click(function() {
    $(this).closest("tr").find("input.bookPrice").doSomething();
});