利用jQuery基于PHP变量实现HTML中购物车数量元素的即时显示与隐藏

你的核心问题在于当前的jQuery代码只在页面首次加载时执行一次，但WooCommerce的购物车数量更新是通过AJAX异步完成的（比如添加商品、移除商品、修改数量时），所以需要监听这些动态变化的事件，才能实现无需刷新页面的即时显示/隐藏效果。

下面是具体的解决方案：

1. 封装可复用的判断函数 #

首先把显示/隐藏的判断逻辑封装成独立函数，这样可以在页面加载和动态更新时重复调用：

function toggleCartNumber() {
    const cartCountElement = $('.wd-cart-number');
    // 转为数字比较，避免字符串格式导致的判断误差
    const cartCount = parseInt(cartCountElement.text().trim(), 10);
    
    if (cartCount === 0) {
        cartCountElement.hide();
    } else {
        cartCountElement.show();
    }
}

2. 绑定WooCommerce的AJAX事件 #

WooCommerce在购物车发生变化时会触发一系列官方JavaScript事件，我们可以监听这些事件，在事件触发后重新执行判断函数：

• added_to_cart：商品添加到购物车后触发
• removed_from_cart：商品从购物车移除后触发
• updated_cart：购物车数量手动更新后触发

3. 完整的WordPress钩子脚本 #

把上述逻辑整合到你的wp_footer钩子中：

add_action('wp_footer', 'hide_cart_count' );
function hide_cart_count() { ?>
<script type="text/javascript">
jQuery(document).ready(function($) {
    // 封装判断函数
    function toggleCartNumber() {
        const cartCountElement = $('.wd-cart-number');
        const cartCount = parseInt(cartCountElement.text().trim(), 10);
        
        if (cartCount === 0) {
            cartCountElement.hide();
        } else {
            cartCountElement.show();
        }
    }

    // 页面加载时执行一次，处理初始状态
    toggleCartNumber();

    // 监听WooCommerce购物车变化事件
    $(document).on('added_to_cart removed_from_cart updated_cart', function() {
        // 延迟100ms执行，确保DOM已更新最新购物车数量
        setTimeout(toggleCartNumber, 100);
    });
});
</script>
<?php }

关键细节说明 #

• 数字转换：用parseInt()把文本内容转为数字，避免因为字符串空格或特殊字符导致的比较错误，让判断逻辑更严谨。
• 延迟执行：添加setTimeout是因为WooCommerce的AJAX事件触发后，DOM中的购物车数量可能还没完全更新，短延迟能确保我们获取到最新数值。
• 事件委托：使用$(document).on()绑定事件，确保即使元素是动态生成的，事件也能正常触发。

额外兼容处理（可选） #

如果你的主题或插件有自定义的购物车更新逻辑，没有触发WooCommerce的默认事件，可以尝试监听元素的文本变化作为补充：

// 监听.wd-cart-number元素的文本内容变化
$('.wd-cart-number').on('DOMSubtreeModified', function() {
    toggleCartNumber();
});

不过这种方法兼容性稍差，优先推荐使用WooCommerce的官方事件。

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