JQuery - Multipliziert man meine zwei Klassen geben keine Ergebnisse

Question

<div id="container"> 
    <div class="jumbotron" id="group"> 
    <form class="form-inline"> 
     <div class="form-group"> 
     <label for="groupNumber">Group:</label> 
     <input type="text" class="groupNumber" /> 
     </div> 
     <div class="form-group inputTop"> 
     <label for="quantity">Quantity:</label> 
     <input type="text" class="quantity" /> 
     </div> 
    <div class="form-group inputTop"> 
     <label for="systemPrice">System Price:</label> 
     <input type="text" class="systemPrice" /> 
    </div> 
    <div class="form-group"> 
     <label for="groupTotal">Group Total:</label> 
     <input type="text" class="groupTotal" /> 
    </div> 
    </form> 

    <div class="row specs" id="pasted" contenteditable="true"></div> 

    </div> 
</div> 

$(document).ready(function() { 
    $('.inputTop input').keyup(multInputs); 

    function multInputs() { 
    $('.inputTop').each(function() { 
     var $quantity = $('.quantity', this).val(); 
     var $systemPrice = $('.systemPrice', this).val(); 
     var $groupTotal = ($quantity * 1) * ($systemPrice * 1) 
    $('.groupTotal', this).text($groupTotal); 
    }); 
    } 
}); 

JS Fiddle: https://jsfiddle.net/waynebunch/jh6uhL1p/5/

Ich habe für eine Weile auf diese gestarrt und bin nichts Falsches sehen. Im Grunde versuche ich, JQuery zu verwenden, um var $quantity durch var $systemPrice zu multiplizieren und das Ergebnis in var $groupTotal anzuzeigen. Es wird mehrere "Gruppen" von diesen geben. Kann mir jemand sagen, was ich hier falsch mache, oder wenn ich weit weg bin? Vielen Dank!

Answer 1

ersetzen:

$('.groupTotal', this).text($groupTotal); 

mit:

$('.groupTotal', this).val($groupTotal); 

Answer 2

Es

$('.groupTotal', this).val($groupTotal); 

sollte

da .groupTotal ist ein input.

Answer 3

Sie sollten diese Funktion versuchen:

function multInputs() { 

$('.group').each(function() { 
    var $quantity = $('.quantity', this).val(); 
    var $systemPrice = $('.systemPrice', this).val(); 
    var $groupTotal = (parseInt($quantity) * 1) * (parseInt($systemPrice) * 1) 

    if(isNaN($groupTotal)) 
    $('.groupTotal', this).val(''); 
    else 
    $('.groupTotal', this).val($groupTotal); 
}); 

Ich hoffe, Sie bekommen führen, welches Sie wünschen

Answer 4

Zusätzlich zu dem, was die anderen gesagt haben (val statt text verwenden), sind Sie auch Rufen Sie die each Methode auf den falschen Selektor.

Die Elemente mit Klasse quantity und systemprice sind nicht Kinder der Elemente mit Klasse inputtop. Verwenden Sie stattdessen

$(".form-inline").each(...);