Получение значений для заполнения текста вместо диапазона

Question

Я собрал скрипт, который добавляет значения в текстовые поля и отображает суммы в диапазоне. Я пробовал массу вещей, но я не могу заставить его отображать суммы в текстовом поле ввода. Вот скрипка, над которой я работал. http://jsfiddle.net/elevationprint/MaK2k/17/

В принципе, я хочу изменить промежутки для ввода текстовых полей. Если кто-нибудь может взглянуть и сообщить мне, что мне не хватает, я был бы признателен! Код этой

HTML

Red<br> 
12x12<input class="qty12" value="" /><br/> 
12x24<input class="qty24" value="" /><br> 
<br> 
Blue<br> 
12x12<input class="qty12" value="" /><br/> 
12x24<input class="qty24" value="" /><br> 
<br><br> 
Total = <span class="qty12lable"></span> x $.95<br> 
Total = <span class="qty24lable"></span> x $1.40<br> 

SCRIPT

$('.qty12').keyup(function(){ 
    var qty12Sum=0; 
    $('.qty12').each(function(){ 
     if (this.value != "") 
      qty12Sum+=parseInt(this.value); 

}); 
    // alert('foo'); 
    $(".qty12lable").text(qty12Sum); 
    //console.log(amountSum);  }); 


$('.qty24').keyup(function(){ 
    var qty24Sum=0; 
    $('.qty24').each(function(){ 
     if (this.value != "") 
      qty24Sum+=parseInt(this.value); 

}); 
    // alert('foo'); 
    $(".qty24lable").text(qty24Sum); 
    //console.log(amountSum); }); 

Answer 1

Вы можете настроить таргетинг на поля ввода, как так:

Total = <input class="qty12lable" value=""> x $.95<br> 
Total = <input class="qty24lable" value=""> x $1.40<br> 

$("input.qty12lable").val(qty12Sum); 
$("input.qty24lable").val(qty24Sum); 

Answer 2

Чтобы задать текст (значение) textbox вы должны использовать .val() не .text(). Как это:

$('.qty12').keyup(function() { 
 
    var qty12Sum = 0; 
 
    $('.qty12').each(function() { 
 
    if (this.value != "") 
 
     qty12Sum += parseInt(this.value); 
 

 
    }); 
 
    
 
    
 
    $(".qty12lable").val(qty12Sum); 
 
}); 
 

 

 
$('.qty24').keyup(function() { 
 
    var qty24Sum = 0; 
 
    $('.qty24').each(function() { 
 
    if (this.value != "") 
 
     qty24Sum += parseInt(this.value); 
 

 
    }); 
 
    
 
    
 
    $(".qty24lable").val(qty24Sum); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Red 
 
<br>12x12 
 
<input class="qty12" value="" /> 
 
<br/>12x24 
 
<input class="qty24" value="" /> 
 
<br> 
 
<br>Blue 
 
<br>12x12 
 
<input class="qty12" value="" /> 
 
<br/>12x24 
 
<input class="qty24" value="" /> 
 
<br> 
 
<br> 
 
<br>Total = <input class="qty12lable"/> x $.95 
 
<br>Total = <input class="qty24lable"/> x $1.40 
 
<br>

Answer 3

Этот фрагмент кода имеет некоторую логику о том, как вы можете прикрепить слушателей событий на поле ввода и как вы можете получить их значения. Это не идеально и имеет довольно много ошибок с точки зрения уровня производительности, но это даст нам подсказку о том, как вы можете слушать и манипулировать DOM с помощью JQuery. Вот что такое JQuery.

$("input") 
 
    .change(function() { 
 
    var prevVal = ($('#total').html() !== '') ? $('#total').html() : 0; 
 
    if(parseInt($(this).val()) === NaN) { 
 
    return; 
 
    } 
 
    $('#total').html(parseInt($(this).val()) + parseInt(prevVal)); 
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="1"></input><br> 
 
<input type="text" id="2"></input><br> 
 
<hr> 
 
Total = <span id="total" class="qty12lable"></span> <br>