基于两个下拉选择值控制PayPal按钮显示/隐藏的问题排查

背景 #

我使用一款WordPress插件在网站售卖票务，对应的HTML结构如下：

<form target="_blank" action="https://myurl.com/wp-admin/admin-post.php?action=add_wpeevent_button_redirect" method="post" class="tickets">
    <input type="hidden" name="cmd" value="_cart">
    <input type="hidden" name="path" value="paypal">
    <input type="hidden" name="business" value="myemail@address.com">
    <input type="hidden" name="item_name" value="My Event Name">
    <input type="hidden" name="custom" value="20681">
    <input type="hidden" name="currency_code" value="USD">
    <input type="hidden" name="no_note" value="1">
    <input type="hidden" name="no_shipping" value="1">
    <input type="hidden" name="notify_url" value="https://myurl.com/wp-admin/admin-post.php?action=add_wpeevent_button_ipn">
    <input type="hidden" name="lc" value="EN_US">
    <input type="hidden" name="bn" value="WPPlugin_SP">
    <input type="hidden" name="return" value="https://myurl.com/thankyou">
    <input type="hidden" name="cancel_return" value="https://myurl.com/tickets">
    <input type="hidden" name="upload" value="1">

    <table class="main-table_20681" style="width: 100% !important;">
        <tbody>
            <tr>
                <td class="row-qty">
                    <select name="wpeevent_button_qty_a">
                        <option value="0">0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </select>
                </td>
                <td class="row-name">Meal Ticket</td>
                <td class="row-price">31.50 USD</td>
                <td class="row-desc">Meal Ticket<input type="hidden" name="item_name_1" value="Meal Ticket"><input type="hidden" name="id_1" value="2201"><input type="hidden" name="amount_1" value="31.50"></td>
            </tr>
            <tr>
                <td>
                    <select name="wpeevent_button_qty_b">
                        <option value="0">0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </select>
                </td>
                <td>Dance Ticket</td>
                <td>35.50 USD</td>
                <td>Dance Ticket<input type="hidden" name="item_name_2" value="Dance Ticket"><input type="hidden" name="id_2" value="2202"><input type="hidden" name="amount_2" value="35.50"></td>
            </tr>
        </tbody>
    </table>
    <input class="wpeevent_paypalbuttonimage" type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" name="submit" alt="PayPal Button">
</form>

该插件会将wpeevent_button_qty_a和wpeevent_button_qty_b的数值求和后传递至支付页，但当两个选择框数值均为0时，会抛出错误（推测是PayPal无法处理0金额订单或插件自身逻辑问题）。由于默认选中值为0，用户很容易误提交触发错误。

因为无法修改插件源码，我尝试用JavaScript实现以下逻辑：

• 默认隐藏PayPal按钮
• 当两个选择框数值都为0时隐藏按钮
• 其他情况显示按钮

尝试过的代码及问题 #

第一次尝试的代码：

$('.wpeevent_paypalbuttonimage').hide();

let select = document.querySelector('.tickets');
select.addEventListener('change', function() {
    var qty_a = $('.wpeevent_button_qty_a').val();
    var qty_b = $('.wpeevent_button_qty_b').val();

    if (qty_a > 1 && qty_b > 1) {
        $('.wpeevent_paypalbuttonimage').hide();
    } else {
        $('.wpeevent_paypalbuttonimage').show();
    }
});

调整后的代码：

$(function() {
    $('.wpeevent_paypalbuttonimage').hide();
    $('select[name^="wpeevent_button_qty_"]').change(function() {
        var qty_a = $('.wpeevent_button_qty_a').val();
        var qty_b = $('.wpeevent_button_qty_b').val();
        
        if (qty_a > 1 && qty_b > 1) {
            $('.wpeevent_paypalbuttonimage').hide();
        } else {
            $('.wpeevent_paypalbuttonimage').show();
        }
    });
});

当前问题：按钮默认隐藏，选择1及以上数值时按钮会显示，但将两个选择框改回0时，按钮不会隐藏。

修复后的代码 #

$(function() {
    // 缓存按钮元素，避免重复DOM查询
    const paypalBtn = $('.wpeevent_paypalbuttonimage').hide();
    
    // 监听所有数量选择框的change事件
    $('select[name^="wpeevent_button_qty_"]').on('change', function() {
        // 将选择框的值转为整数，避免字符串比较问题
        const qtyA = parseInt($('.wpeevent_button_qty_a').val(), 10);
        const qtyB = parseInt($('.wpeevent_button_qty_b').val(), 10);
        
        // 核心逻辑：当两个数量都为0时隐藏按钮，否则显示
        if (qtyA === 0 && qtyB === 0) {
            paypalBtn.hide();
        } else {
            paypalBtn.show();
        }
    });
});

关键修正点 #

1. 修正判断逻辑：原代码的条件完全和需求相反，应该判断「两个数量都为0」时隐藏按钮，而非「都大于1」时隐藏
2. 类型转换：val()返回的是字符串，必须转为整数后再进行数值比较，避免字符串比较的潜在问题
3. DOM元素缓存：提前缓存按钮元素，减少重复查询DOM的性能消耗
4. 确保DOM加载完成：用$(function(){})包裹代码，确保所有DOM元素加载完成后再执行逻辑

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