Выберите поле следующего типа ввода Jquery

Question

<div class="form-row itemrow">
    <div class="col-md-4">
        <label for="item">Item <span style="color:#ef172c;"> *</span></label>
        <input name="item" type="text" data-parsley-trigger="blur" required  class="form-control item" />
    </div>

    <div class="col-md-2">
        <label for="price">Price <span style="color:#ef172c;"> *</span></label>
        <input  name="price" type="number" data-parsley-trigger="blur" required  class="form-control price" />
    </div>

    <div class="col-md-2">
        <label for="qty">Qty <span style="color:#ef172c;"> *</span></label>
        <input  value="1" name="qty" type="number" data-parsley-trigger="blur" required  class="form-control qty" />
    </div>

    <div class="col-md-2">
        <label for="totalforone">Total</label>
        <input name="totalforone" value="100" type="number" data-parsley-trigger="blur"  class="form-control totalforone" />
    </div>

    <div class="col-md-2">
        <button id="addmore" style="height: 34px; margin-top: 2em;" class="btn btn-sm btn-success add-more btn-block" type="button"><i class="glyphicon glyphicon-plus"></i> Add Item</button>
    </div>
</div>

function calculation(){
    var price = $(".price").val();  
    var qty = $(".qty").val();  
    var aa = $(this).next().find('div > .totalforone').val();
    console.log(aa);
};

$(".price").bind('keyup mouseup', calculation);
$(".qty").bind('keyup mouseup', calculation);

У меня есть эти строки для умножения цены и количества. Каждая строка вводит цену и количество вручную и итого в виде ввода итогов. Хотите установить цену x кол-во = итого по каждой строке. У меня есть возможность добавить больше строк

Answer 1

Вы должны передать this в функцию, чтобы вы могли ссылаться на нее внутри функции. Затем вы можете нацелить ближайшую строку с помощью .itemrow , чтобы найти соответствующий .totalforone для установки вычисленного значения. Кроме того, лучше использовать input событие вместо keyup и mouseup:

function calculation(el){
  var price = $(".price").val();  
  var qty = $(".qty").val();  
  $(el).closest('.itemrow').find('.totalforone').val(price * qty);
};

$('body').on('input', '.price', function(){calculation(this)});
$('body').on('input','.qty', function(){calculation(this)});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-row itemrow">
    <div class="col-md-4">
    <label for="item">Item <span style="color:#ef172c;"> *</span></label>
    <input name="item" type="text" data-parsley-trigger="blur" required  class="form-control item" />
</div>

<div class="col-md-2">
    <label for="price">Price <span style="color:#ef172c;"> *</span></label>
    <input  name="price" type="number" data-parsley-trigger="blur" required  class="form-control price" />
</div>

<div class="col-md-2">
    <label for="qty">Qty <span style="color:#ef172c;"> *</span></label>
    <input  value="1" name="qty" type="number" data-parsley-trigger="blur" required  class="form-control qty" />
</div>

<div class="col-md-2">
<label for="totalforone">Total</label>
<input name="totalforone" value="100" type="number" data-parsley-trigger="blur"  class="form-control totalforone" />
</div>

<div class="col-md-2">
<button id="addmore" style="height: 34px; margin-top: 2em;" class="btn btn-sm btn-success add-more btn-block" type="button"><i class="glyphicon glyphicon-plus"></i> Add Item</button>
</div>
</div>