클래스가있는 현재 테이블 행의 입력 필드 찾기

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> 

어떻게 jQuery를이 행의 bookPrice 및 bookTotal 클래스에 도달 할 다음과 같이

나는 마크 업을? 필자는 여러 책 제목을 가지고 있기 때문에 현재 행에 입력 된 내용에만 액세스해야합니다.

감사합니다.

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(); 
});