スパンの代わりにテキストを取り込む値を取得する

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

をあなたは.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

このコードを使用すると、入力フィールドにイベントリスナーを添付することができますし、どのようにそれらの値を取得する方法についていくつかのロジックを持っています。これは完璧ではなく、プロダクションレベルの観点からはかなりのバグがありますが、これはJqueryを使用してDOMをリスニングしたり操作する方法についてのヒントです。これは、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>