javascript - jquery 函数在一个页面中有效，但在具有相同属性的其他页面中无效(但它在控制台上有效)

Question

我现在的处境非常奇怪。我试图在 wordpress woocommerce 结帐页面中使用 jquery 隐藏两个元素。它是这样的(伪代码):

if (#id) is >= 1 
    then hide (elements)
else
    show (elements)

我的代码是这个:

jQuery(document).ready(function () { 
    if (jQuery('#shipping_method_0_free_shipping6').length >= 1 ) { 
        jQuery('[for="shipping_method_0_flat_rate8"]').hide();
        jQuery('[value="flat_rate:8"]').hide();
    } else { 
        jQuery( "#shipping_method_0_flat_rate8" ).show() && jQuery(".woocommerce-Price-amount.amount").show(); 
}
});

奇怪的是，如果我将脚本添加到代码块上，那么这在 woocommerce 的“购物车”页面上运行良好，但是当我将其添加到“结帐”页面上时，它在页面加载时工作，但一旦页面加载已满载，元素再次显示...一些想法为什么或一些建议？

非常感谢您抽出时间来查看!

Answer 1

在 WooCommerce 中，结账是由 Ajax 生成的。因此，当页面加载时，会像其他元素一样生成结帐，然后触发文档就绪事件，然后 WooCommerce 使用 ajax 重新加载结帐。所以基本上你的 jQuery 代码只适用于结账的第一次加载，它会立即被 Ajax 覆盖。

要解决此问题，您可以在 WooCommerce 添加的 Updated_checkout 事件上运行一个函数。像这样:

jQuery('body').on('updated_checkout', function() {
     if (jQuery('#shipping_method_0_free_shipping6').length >= 1 ) { 
         jQuery('[for="shipping_method_0_flat_rate8"]').hide();
         jQuery('[value="flat_rate:8"]').hide();
     } else { 
         jQuery( "#shipping_method_0_flat_rate8" ).show() && jQuery(".woocommerce-Price-amount.amount").show(); 
     }
}