基于jQuery实现当数字字段值为0时隐藏WooCommerce结账费用行

有效解决方案 #

以下是经过验证的代码，可实现当donation_amount输入框值为0（或空值）时，隐藏结账订单表中的.fee行，值不为0时恢复显示：

jQuery(document).ready(function($) {
    // 封装判断逻辑为可复用函数
    function toggleFeeRow() {
        // 将输入框值转为数字，空值/非数字按0处理
        const donationAmount = parseFloat($('#donation_amount').val()) || 0;
        // 根据金额控制fee行的显示状态
        $('.fee').toggle(donationAmount !== 0);
    }

    // 页面加载完成后立即执行一次，处理初始状态
    toggleFeeRow();

    // 监听输入框的键盘输入和值变化事件（覆盖手动输入、箭头调整等场景）
    $('#donation_amount').on('keyup change', toggleFeeRow);
});

代码关键点说明 #

• 值类型处理：用parseFloat()将输入框的字符串值转为数字，配合|| 0确保空值、非数字输入都被视为0，避免判断逻辑出错
• 事件覆盖：同时监听keyup和change事件，既处理手动输入的情况，也支持点击数字输入框的上下箭头修改值的场景
• 复用性与可读性：将判断逻辑封装为函数，页面初始化和事件触发时均可调用，代码更简洁
• 避免元素丢失：使用toggle()方法直接控制显示/隐藏，不会移除.fee类名，确保后续能正常选中目标元素

你之前代码的问题分析 #

1. 判断逻辑不全：初始代码仅判断输入框值的长度为0，未处理输入"0"的情况，不符合需求
2. 错误移除类名：执行$( 'tr').removeClass('fee');后，.fee选择器将无法找到目标行，导致后续无法恢复显示
3. 错误获取元素值：尝试通过val()获取<span>标签的内容是无效的，val()仅适用于表单输入元素，且实际上不需要通过价格元素判断，直接用输入框的值更准确
4. 事件监听不完整：部分代码仅处理了页面加载时的判断，未监听输入框的实时变化，或监听逻辑覆盖不全
5. 空值未处理：未考虑输入框为空的情况，空值应等同于0处理

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