我对此有疑问。我的代码工作正常，但是我使用它进行更新，然后出现问题，因为已经设置了值。
在此代码中：
$('#principal').on('input', function() {
calculate();
});
$('#interest').on('input', function() {
calculate();
});当您在字段上输入值时，它会起作用。但是如果我有这段代码怎么办：
<input class="form-control number" name="principal" id="principal" type="text" value="<?php print $fetch['principal']; ?>" required/>
<input class="form-control number" name="interest" id="interest" type="text" value="<?php print $fetch['interest']; ?>" required/>值已设置。我应该在JQUERY中使用什么代码来执行代码，而无需在输入字段中键入或编辑值。
示例输出：编辑Principal的值（我想要的是在不单击或编辑任何内容的情况下运行计算）
$('#principal, #interest').on('input', function() {
calculate();
});
function calculate(){
var principal = $('#principal').val();
principal = principal.replace(/,/g, "");
principal = parseInt(principal);
var interest = $('#interest').val();
interest = interest.replace(/,/g, "");
interest = parseInt(interest);
var total = "";
var total_interest = "";
if(isNaN(interest) || isNaN(principal)){
total_interest = " ";
total = " ";
}
else{
total_interest = (interest / 100) * principal;
total = (interest / 100) * principal + principal;
}
var num = total;
num = addCommas(num);
$('#total').val(num);
var num_interest = total_interest;
num_interest = addCommas(num_interest);
$('#total_interest').val(num_interest);
function addCommas(nStr) {
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
}
$('.number').keyup(function(event){
// skip for arrow keys
if(event.which >= 37 && event.which <= 40) return;
// format number
$(this).val(function(index, value) {
return value
.replace(/\D/g, "")
.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Principal:
<input class="form-control number" name="principal" id="principal" type="text" value="9000" required/>
<br><br>
Interest:
<input class="form-control number" name="interest" id="interest" type="text" value="10" required/>
<br><br>
Total Interest:
<input class="form-control number" name="total_interest" id="total_interest" type="text" readonly/>
<br><br>
Total Payment
<input class="form-control number" name="total" id="total" type="text" readonly/>只需执行以下操作：
calculate();
...在脚本顶层的代码中。确保您的脚本位于的结尾处body，在结束</body>标记之前。
例：
function calculate() {
console.log(
"calculating with " +
$("#principal").val() +
" and " +
$("#interest").val()
);
}
$('#principal').on('input', function() {
calculate();
});
$('#interest').on('input', function() {
calculate();
});
calculate();<input class="form-control number" name="principal" id="principal" type="text" value="42" required/>
<input class="form-control number" name="interest" id="interest" type="text" value="3.7" required/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>旁注：您可以简化和合并on通话：
$('#principal, #interest').on('input', calculate);
function calculate() {
console.log(
"calculating with " +
$("#principal").val() +
" and " +
$("#interest").val()
);
}
$('#principal, #interest').on('input', calculate);
calculate();<input class="form-control number" name="principal" id="principal" type="text" value="42" required/>
<input class="form-control number" name="interest" id="interest" type="text" value="3.7" required/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>这是您添加到答案中的片段
calculate();
...添加到末尾：
$('#principal, #interest').on('input', function() {
calculate();
});
function calculate(){
var principal = $('#principal').val();
principal = principal.replace(/,/g, "");
principal = parseInt(principal);
var interest = $('#interest').val();
interest = interest.replace(/,/g, "");
interest = parseInt(interest);
var total = "";
var total_interest = "";
if(isNaN(interest) || isNaN(principal)){
total_interest = " ";
total = " ";
}
else{
total_interest = (interest / 100) * principal;
total = (interest / 100) * principal + principal;
}
var num = total;
num = addCommas(num);
$('#total').val(num);
var num_interest = total_interest;
num_interest = addCommas(num_interest);
$('#total_interest').val(num_interest);
function addCommas(nStr) {
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
}
$('.number').keyup(function(event){
// skip for arrow keys
if(event.which >= 37 && event.which <= 40) return;
// format number
$(this).val(function(index, value) {
return value
.replace(/\D/g, "")
.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
});
});
calculate();<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Principal:
<input class="form-control number" name="principal" id="principal" type="text" value="9000" required/>
<br><br>
Interest:
<input class="form-control number" name="interest" id="interest" type="text" value="10" required/>
<br><br>
Total Interest:
<input class="form-control number" name="total_interest" id="total_interest" type="text" readonly/>
<br><br>
Total Payment
<input class="form-control number" name="total" id="total" type="text" readonly/>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句