所以我遇到了一个问题----我点击一个数字，它就会打印出来(函数一(。我点击了一个运算符(.operators类[.multy，.diff，.minus，.plus](。所以问题从这里开始。I点击另一个数字(函数二(。数字同时打印在数字1部分和数字2部分以下是代码：JS小提琴：https://jsfiddle.net/idk_anything_pro/g53bsvm9/1/
Plzz修复我的代码。。。❤和我的代码是如果你想要它：
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<title>Calculator</title>
<style>
.modulus,
.equal,
.plus,
.minus,
.divide,
.multiply{
width: 57px;
height: 43px;
background-color: gold;
color: black;
margin: 5px;
text-align: center;
border: none;
font-weight: bold;
}
.zero,
.nine,
.eight,
.seven,
.six,
.five,
.four,
.three,
.two,
.one{
width: 57px;
height: 43px;
background-color: black;
color: white;
margin: 5px;
text-align: center;
font-weight: bold;
}
.display{
border: 1px black solid;
width: 268px;
height: 45px;
margin-left: 5px;
background-color: black;
color: white;
font-weight: bold;
margin-bottom: 3px;
}
</style>
</head>
<body>
<div>
<div class="display">
<span class="num1"></span>
<span class="operator"></span>
<span class="num2"></span>
</div>
<button class="one">1</button>
<button class="two">2</button>
<button class="three">3</button>
<button class="multiply">x</button>
<br>
<button class="four">4</button>
<button class="five">5</button>
<button class="six">6</button>
<button class="plus">+</button>
<br>
<button class="seven">7</button>
<button class="eight">8</button>
<button class="nine">9</button>
<button class="minus">-</button>
<br>
<button class="zero">0</button>
<button class="equal">=</button>
<button class="modulus">%</button>
<button class="divide">/</button>
</div>
<script>
if ($('.operator').is(':empty')){
numberone();
}
$('.minus').click(function(){
$(".operator").append("-");
numbertwo();
});
$('.multiply').click(function(){
$(".operator").append("x");
numbertwo();
});
$('.divide').click(function(){
$(".operator").append("÷");
numbertwo();
});
$('.plus').click(function(){
$(".operator").append("+");
numbertwo();
});
function numberone(){
$('.one').click(function(){
$(".num1").append(1);
});
$('.two').click(function(){
$(".num1").append(2);
});
$('.three').click(function(){
$(".num1").append(3);
});
$('.four').click(function(){
$(".num1").append(4);
});
$('.five').click(function(){
$(".num1").append(5);
});
$('.six').click(function(){
$(".num1").append(6);
});
$('.seven').click(function(){
$(".num1").append(7);
});
$('.eight').click(function(){
$(".num1").append(8);
});
$('.nine').click(function(){
$(".num1").append(9);
});
}
function numbertwo(){
$('.one').click(function(){
$(".num2").append(1);
});
$('.two').click(function(){
$(".num2").append(2);
});
$('.three').click(function(){
$(".num2").append(3);
});
$('.four').click(function(){
$(".num2").append(4);
});
$('.five').click(function(){
$(".num2").append(5);
});
$('.six').click(function(){
$(".num2").append(6);
});
$('.seven').click(function(){
$(".num2").append(7);
});
$('.eight').click(function(){
$(".num2").append(8);
});
$('.nine').click(function(){
$(".num2").append(9);
});
}
</script>
</body>
</html>```
代码问题：您最初为click事件绑定了numberone。当用户按下一个运算符时，就绑定了另一个函数numbertwo。现在，第一个函数还没有解除绑定。这就是为什么numberone和numbertwo都被执行的原因。除此之外，为每个按钮编写一个函数并不是一个好方法。可以使用换行文本，也可以向元素添加数据属性。
解决方案：请注意，我已经为数字元素分配了一个类num。我只绑定了一个click事件。单击.num元素时，它会检查num1元素内部是否已经有一些内容。除此之外，它还会检查是否按下了操作员按钮。如果两个条件都满足，则在.num2中追加文本，否则在num1中追加值。
var operatorFlag = false;
$('.minus').click(function() {
$(".operator").append("-");
operatorFlag = true;
});
$('.multiply').click(function() {
$(".operator").append("x");
operatorFlag = true;
});
$('.divide').click(function() {
$(".operator").append("÷");
operatorFlag = true;
});
$('.plus').click(function() {
$(".operator").append("+");
operatorFlag = true;
});
$('.num').click(function() {
var value = $(this).text();
var text;
if ($('.num1').text().trim() && operatorFlag) {
text = $('.num2').append(value);
} else {
$('.num1').append(value);
}
});.modulus,
.equal,
.plus,
.minus,
.divide,
.multiply {
width: 57px;
height: 43px;
background-color: gold;
color: black;
margin: 5px;
text-align: center;
border: none;
font-weight: bold;
}
.num {
width: 57px;
height: 43px;
background-color: black;
color: white;
margin: 5px;
text-align: center;
font-weight: bold;
}
.display {
border: 1px black solid;
width: 268px;
height: 45px;
margin-left: 5px;
background-color: black;
color: white;
font-weight: bold;
margin-bottom: 3px;
}<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<div>
<div class="display">
<span class="num1"></span>
<span class="operator"></span>
<span class="num2"></span>
</div>
<button class="one num">1</button>
<button class="two num">2</button>
<button class="three num">3</button>
<button class="multiply">x</button>
<br>
<button class="four num">4</button>
<button class="five num">5</button>
<button class="six num">6</button>
<button class="plus">+</button>
<br>
<button class="seven num">7</button>
<button class="eight num">8</button>
<button class="nine num">9</button>
<button class="minus">-</button>
<br>
<button class="zero num">0</button>
<button class="equal">=</button>
<button class="modulus">%</button>
<button class="divide">/</button>
</div>