Добавьте уникальный идентификатор, чтобы сформировать ввод для всего

Question

Проблема в том, что я работаю над системой выставления счетов. Который использует это,

$(document).ready(function() {
    $('#add').click(function() {
       JQuery('#lineItems').append('<input type="text" name="description[]"
           class="ui-corner-all text invDesc" /> 
           <input type="text" name="qty[]" class="ui-corner-all text invQty" /> 
           <input type="text" name="amount[]" class="ui-corner-all text invAmount"
           title="Amount" /> 
           <input type="hidden" name="rowTotal[]" class="row-total-input" />');
    });
   });

для создания новой позиции. Скрытый ввод с именем rowTotal [] предназначен для хранения итогов каждой строки, чтобы их можно было сложить. Код, который я использую, чтобы получить общее количество строк *,

$(function(){
    $('.row-total-input').each(
        function( intIndex ){
            $('.invAmount').livequery('blur', function() {
                    var $this = $(this);
                    var amount = $this.val();

                    var qty = $this.parent().find('.invQty').val(); 

                    if ( (IsNumeric(amount)) && (amount != '') ) {           
                        var rowTotal = qty * amount;   
                        $this.css("background-color", "white").parent().find(".row-total-input").val(rowTotal); 
                    } else {        
                        $this.css("background-color", "#ffdcdc");                     
                    };          

                    calcProdSubTotal();      
                    calcOrderTotal();
            });
        }
    );
});

Однако он обновляет все поля ввода rowTotal [] до итоговой суммы последней строки, поэтому итоговая сумма неверна.

Я предполагаю, что мне нужно создать какой-то уникальный идентификатор для каждого rowTotal [], чтобы обновлялся только правильный. Я просто не знаю, как это сделать.

Заранее спасибо.

Answer 1

Ах проблема здесь:

var qty = $this.parent().find('.invQty').val();

Если бы у каждой строки был отдельный родитель, все было бы хорошо, но все «строки» содержатся в одном и том же родителе - #lineItems. Что должно помочь, это изменить текущий код создания строки на это:

$(document).ready(function() {
    $('#add').click(function() {
       JQuery('#lineItems').append('<div><input type="text" name="description[]"
           class="ui-corner-all text invDesc" /> 
           <input type="text" name="qty[]" class="ui-corner-all text invQty" /> 
           <input type="text" name="amount[]" class="ui-corner-all text invAmount"
           title="Amount" /> 
           <input type="hidden" name="rowTotal[]" class="row-total-input" /></div>');
         //notice the extra div tag that wrapps around all the input fields
    });
});