簡單的計算器jquery腳本

Question

所以我寫了一個非常簡單的腳本作爲計算器，以便客戶端可以看到服務將花費多少錢，然後根據對文本輸入的更改更新結果。問題是在第一次出現後停止正確計算值。在這裏，它是令人滿意的。

<script> 
$(function(){ 


var one=0; 
var two=0; 
var three=0; 
$("input:text").change(function(){ 
if($(this).val() == $('#first').val()) 
{ 
one = parseInt($(this).val()); 



} 
else if($(this).val() == $('#second').val()){ 

two = parseInt($(this).val()); 

} 
else if($(this).val() == $('#third').val()){ 

three = parseInt($(this).val()); 

} 

}); 


$('input:text').change(function(){ 

$('#result').text(one+two+three); 


}); 


}); 


</script> 

和形式：

<div id="container"> 
<form action="something.html" id="subit"> 
<label for="first">put numbers</label><input type="text" id="first"/> 
<label for="second">more numbers</label><input type="text" id="second" value="0"/> 
<label for="third">and more numbers</label><input type="text" id="third" value="0"/> 
<input type="submit" /> 
</form> 
<div id="result"></> 
</div> 

Answer 1

試試這個代碼

$(document).ready(function() { 
    var textboxes = $("#container input:text"); 
    textboxes.on("keyup", function() { 
     var amt = 0; 
     textboxes.each(function() { 
      amt += +$(this).val(); 
     }); 
     $("#result").html(amt); 
    }); 
});​ 

工作小提琴：http://jsfiddle.net/naveen/87p53/

---

至於你的代碼，在代碼

改變這些東西

a。比較ids而不是值，它更安全。 b。刪除第二個更改功能。根本不需要。

$(function() { 
    var one = 0; 
    var two = 0; 
    var three = 0; 
    $("input:text").change(function() { 
     if (this.id == "first") { 
      one = parseInt($(this).val()); 
     } 
     else if (this.id == "second") { 
      two = parseInt($(this).val()); 
     } 
     else if (this.id == "third") { 
      three = parseInt($(this).val()); 
     } 
     $('#result').html(one + two + three); 
    }); 
});​