JQuery Live Calc Многострочный ввод
Это мой код:
<?php
for($i=1;$i<10;$i++){
echo '<input type="text" class="count value'. $i .'">';
echo '<input type="text" class="count '. $i .'value">';
echo '<input type="text" disabled="disabled" id="result'. $i .'"><p>';
}
echo '<input type="text" disabled="disabled" id="total"><p>';
?>
и jQuery:
$(document).ready(function(){
$(".count").keyup(function(){
for (var i = 0; i < 10; i++) {
var val1 = +$(".value"+ i).val();
var val2 = +$("."+ i +"value").val();
$("#result" + i).val(val1*val2);
}
});
});
$(document).ready(function(){
$(".count").keyup(function(){
for (var i = 0; i < 10; i++) {
var vala = 0;
vala += +$("#result"+ i).val();
}
$("#total").val(vala);
});
});
Первая часть кода прекрасно работает.
Вернуть умножение двух входов в id=result$i.
У меня проблема с последней id=total.
Должен вернуть сумму всего результата X входы
но теперь вернем только последнее умножение.
У вас есть идеи, что случилось?
Решение
Вы можете упростить свой код, сгруппировав соответствующие input элементы вместе в содержащем divиспользование обхода DOM для получения необходимых значений и объединение двух for петли вместе. Попробуй это:
<div class="group">
<input type="text" class="count valueA" />
<input type="text" class="count valueB" />
<input type="text" class="result" disabled="disabled" />
</div>
<!-- repeat the above as needed. Note that the incremental id is no longer needed -->
<p>
<input type="text" disabled="disabled" id="total" />
</p>
$(document).ready(function(){
$(".count").keyup(function() {
var total = 0;
$('.group').each(function() {
var $group = $(this);
var valA = +$group.find('.valueA').val() || 0;
var valB = +$group.find('.valueB').val() || 0;
var result = valA + valB;
total += result;
$group.find('.result').val(result);
});
$("#total").val(total);
});
});
Другие решения
Это потому, что вы определили переменную vala до 0 в течение цикла. который должен быть снаружи для цикла:
$(".count").keyup(function(){
var vala= 0;
for (var i = 0; i < 10; i++) {
vala += $("#result"+ i).val();
}
$("#total").val(vala);
});