2016-10-14 5 views
0

Ich habe einen Code-Stift-Link, in dem ich 3 Textfelder habe. wenn ich 3 in das zweite Textfeld eingebe 3 * 5 = 15 sollte in das erste Textfeld (working) kommen, wenn ich 4 in das zweite Textfeld eingebe 4 * 5 = 20 und 20 + 15 (previous) = 35 sollte kommen im ersten Text,jquery Multiplikation von identischen Textfeldern?

, dass die letzten 2 Textfeld Wert wird mit 5 multipliziert und einige sollten in das erste Textfeld kommen.

Das Problem ist, dass Sie nicht unterstützen, Klassenname oder ID-Name des Textfelds zu ändern. wie es geht?

  <input type="text" id="amount"/> 

      first:<input type="number" class="quantity"/> 
      second:<input type="number" class="quantity"/> 

codepen

+1

Sie Links nicht zu Code verwenden, den Code in der Frage stellen bitte - Links anfällig für Fäulnis sind. – Tibrogargan

Antwort

1

Verwenden Sie each und den Selektor .quantity[value!=""], um nur Eingänge mit einem Wert zu erhalten.

jQuery('.quantity').change(function() { 
 
    var amount = 0; 
 
    jQuery('.quantity[value!=""]').each(function() { 
 
    amount += this.value * 5; 
 
    }); 
 
    jQuery('#amount').val(amount); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input type="text" id="amount" />first: 
 

 
<input type="number" class="quantity" />second: 
 
<input type="number" class="quantity" />

1

wenn ich gut verstehen, wollen Sie die Summe der 2 andere in der 1. Feld ber. Wenn dem so ist dies versuchen:

$('.quantity').change(function() 
{ 
    var amount = $(this).val() * 5 
       + $(this).siblings('.quantity').val() * 5; 
    $('#amount').val(amount); 
}); 

[EDIT] fügen Sie eine Notiz über die Verwendung von jQuery/$

By the way, wenn Sie in keinem Konflikt-Modus arbeiten (mit einem anderen lib) Sie kann die $ anstelle von jQuery, schneller zu schreiben und mehr Standard!

0
<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $(".quantity").change(function(){ 
var amount =0; 
     $('.quantity[value!=""]').each(function() { 
    amount += this.value * 5; 
    }); 
$('#amount').val(amount); 
    }); 
}); 
</script> 
</head> 
<body> 
<input type="text" id="amount"/> 

      first:<input type="number" class="quantity"/> 
      second:<input type="number" class="quantity"/> 

</body> 
</html> 
Verwandte Themen