【发布时间】：2022-01-12 10:31:27
【问题描述】：
我正在尝试在网页中使用 JavaScript 对输入字段进行自动求和。我的 javascript 函数正在部分工作。但是，.change 会在手动更改时触发，但如果由另一个 JavaScript 函数更改则不会触发。不手动改怎么触发？
<html>
<head>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta charset="utf-8">
<link rel="icon" type="image/png" href="title-icon.png"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
input{width: 70px;text-align-last: center;}
.icon{margin-right:3%;font-size:48px;color:red; animation-name: thi;animation-iteration-count: infinite; animation-duration: 3s;}
@keyframes thi {from{color:red} to {color:white}}
</style>
</head>
<body><br>
<div style="margin:5%">
<div class="row">
<div class="col-4 border border-danger bg-primary">
<div class="text-center">Section A</div>
</div>
<div class="col-4 border border-danger bg-success">
<div class="text-center">Section B</div>
</div>
<div class="col-4 border border-danger bg-secondary">
<div class="text-center">Grand Total</div>
</div>
</div>
<div class="row">
<div class="col-4 border border-danger bg-primary">
<div class="row text-center">
<div class="col-4">
<div>Male</div>
</div>
<div class="col-4">
<div>Femle</div>
</div>
<div class="col-4">
<div>Total</div>
</div>
</div>
<div class="row text-center">
<div class="col-4">
<div><input type="text" class="male" id="maleA"></div>
</div>
<div class="col-4">
<div><input type="text" class="female" id="femaleA"></div>
</div>
<div class="col-4">
<div><input type="text" class="total" id="totalA" readonly disabled="disabled"></div>
</div>
</div>
</div>
<div class="col-4 border border-danger bg-success">
<div class="row text-center">
<div class="col-4">
<div>Male</div>
</div>
<div class="col-4">
<div>Femle</div>
</div>
<div class="col-4">
<div>Total</div>
</div>
</div>
<div class="row text-center">
<div class="col-4">
<div><input type="text" class="male" id="maleB"></div>
</div>
<div class="col-4">
<div><input type="text" class="female" id="femaleB"></div>
</div>
<div class="col-4">
<div><input type="text" class="total" id="totalB" readonly disabled="disabled"></div>
</div>
</div>
</div>
<div class="col-4 border border-danger bg-secondary">
<div class="row text-center">
<div class="col-4">
<div>Male</div>
</div>
<div class="col-4">
<div>Femle</div>
</div>
<div class="col-4">
<div>Total</div>
</div>
</div>
<div class="row text-center">
<div class="col-4">
<div><input type="text" class="male" id="maletotal" readonly disabled="disabled"></div>
</div>
<div class="col-4">
<div><input type="text" class="female" id="femaletotal" readonly disabled="disabled"></div>
</div>
<div class="col-4">
<div><input type="text" class="total" id="totalall" readonly disabled="disabled"></div>
</div>
</div><br>
</div><br>
</div>
<div class="row text-right">
<div class="col-12"><i class='icon fa fa-arrow-up'></i></div>
</div>
<div class="row text-right">
<div class="col-12">Total of 'Grand Total' is not working!</div>
</div>
<br>
</div>
</body>
<script>
$(document).ready(function()
{ // working
$('#maleA,#femaleA').change(function()
{
maleA = $('#maleA').val();
femaleA = $('#femaleA').val();
allA = Number(maleA)+Number(femaleA);
$('#totalA').val(allA);
}),
$('#maleB,#femaleB').change(function()
{
maleB = $('#maleB').val();
femaleB = $('#femaleB').val();
allB = Number(maleB)+Number(femaleB);
$('#totalB').val(allB);
}),
$('#maleA,#maleB').change(function()
{
maleA = $('#maleA').val();
maleB = $('#maleB').val();
allmale = Number(maleA)+Number(maleB);
$('#maletotal').val(allmale);
}),
$('#femaleA,#femaleB').change(function()
{
femaleA = $('#femaleA').val();
femaleB = $('#femaleB').val();
allfemale = Number(femaleA)+Number(femaleB);
$('#femaletotal').val(allfemale);
}),
//problem is here
$('#maletotal,#femaletotal').change(function()
{
allmale = $('#maletotal').val(); //feed by javascript
allfemale = $('#femaletotal').val(); //feed by javascript
alltotal = Number(allmale)+Number(allfemale);
$('#totalall').val(allA);
})
})
</script>
</html>
请帮助我找出错误或提出更好的解决方案。
【问题讨论】：
-
您可以将
$(input).triggerHandler('change')添加到您的其他更改输入值的函数中吗？ -
哦，你问和回答:)
标签： javascript jquery