基于jQuery的简易计算器交互逻辑问题求助

我正在学习前端技术，使用jQuery开发一款简易计算器。已实现基于参数输入的计算函数，但在界面交互逻辑上遇到困难：输入第一个数字后按下运算符（+、-、×等），输入第二个数字时，输入框应自动覆盖原有内容，但当前代码无法实现这个效果。以下是我的HTML和JS代码：

HTML代码 #

<h1>Simple Calculator</h1>
<div class="inputbar">
    <input
      id="calcInput"
      type="text"
      class="displaycalc"
      onkeypress="return /[0-9]/i.test(event.key)"
      placeholder="0"
    />
</div>
<div class="container">
    <div class="digit seven btn">7</div>
    <div class="digit eight btn">8</div>
    <div class="digit nine btn">9</div>  
    <div class="op clear" onclick="clearDisplay()">CE</div>

    <div class="digit four btn">4</div>
    <div class="digit five btn">5</div>
    <div class="digit 6 btn">6</div>
    <div class="op multiply btn" data-operator="times">x</div>  

    <div class="digit one btn">1</div>
    <div class="digit two btn">2</div>
    <div class="digit three btn">3</div>
    <div class="op division btn" data-operator="divide">/</div>

    <div class="op changeminus btn">-/+</div>
    <div class="digit zero btn">0</div>
    
    <div class="op comma btn">.</div>
    <div class="op plus btn" data-operator="plus">+</div>
    <div class="op minus btn" data-operator="minus">-</div>
    <div id="equal" class="op equal btn">=</div>
</div>

现有代码问题分析 #

1. operator是局部变量，$("#equal").click回调无法访问，导致计算逻辑失效
2. inputSecond函数重复绑定数字点击事件，造成交互混乱，未正确实现输入第二个数字时的清空逻辑
3. 缺少状态标记区分输入阶段，无法控制输入框是追加还是覆盖内容

修正后的JS代码 #

// 全局状态变量，控制输入框行为
let shouldResetDisplay = false;
let firstNumber = null;
let currentOperator = null;

// 数字按钮点击逻辑
$(".digit").click((evt) => {
    const input = $("#calcInput");
    if (shouldResetDisplay) {
        // 输入第二个数字时，直接覆盖原有内容
        input.val(evt.target.innerHTML);
        shouldResetDisplay = false;
    } else {
        // 输入第一个数字时，追加内容
        input.val(input.val() + evt.target.innerHTML);
    }
});

// 运算符按钮点击逻辑
$(".op[data-operator]").click((evt) => {
    firstNumber = parseFloat($("#calcInput").val());
    currentOperator = $(evt.target).data("operator");
    // 标记下一次输入需要重置显示
    shouldResetDisplay = true;
});

// 等于按钮计算逻辑
$("#equal").click(() => {
    if (firstNumber === null || currentOperator === null) return;
    
    const secondNumber = parseFloat($("#calcInput").val());
    let result;

    switch(currentOperator){
        case "plus":
            result = firstNumber + secondNumber;
            break;
        case "minus":
            result = firstNumber - secondNumber;
            break;
        case "times":
            result = firstNumber * secondNumber;
            break;
        case "divide":
            result = secondNumber !== 0 ? firstNumber / secondNumber : "Error";
            break;
        default:
            result = "Error";
            break;
    }

    $("#calcInput").val(result);
    shouldResetDisplay = true;
    // 重置状态，准备下一轮计算
    firstNumber = null;
    currentOperator = null;
});

// 清空显示函数
function clearDisplay(){
    $("#calcInput").val("");
    firstNumber = null;
    currentOperator = null;
    shouldResetDisplay = false;
}

// 正负号切换逻辑
$(".op.changeminus").click(() => {
    const input = $("#calcInput");
    const value = input.val();
    if (value && value !== "0") {
        input.val(value.startsWith("-") ? value.slice(1) : "-" + value);
    }
});

// 小数点处理逻辑
$(".op.comma").click(() => {
    const input = $("#calcInput");
    if (!input.val().includes(".")) {
        input.val(input.val() + ".");
    }
});

关键修改说明 #

• 新增shouldResetDisplay状态变量，按下运算符后标记为true，点击数字时自动覆盖输入框内容并重置标记
• 将firstNumber和currentOperator设为全局变量，确保等于按钮能获取到之前的计算参数
• 移除冗余的inputSecond函数，统一通过状态变量控制输入逻辑，避免重复绑定事件
• 补充正负号切换、小数点处理功能，完善计算器基础交互
• 增加除法除数不为零的判断，避免错误计算

内容的提问来源于stack exchange，提问作者Sandi Miftah