Woocommerce中未勾选货运代理复选框时隐藏押金支付选项问题求助

问题背景 #

我正在使用JavaScript实现指定复选框勾选状态对应特定元素显隐的效果：当「Freight forwarding」复选框未勾选时，隐藏押金支付选项。

我已在子主题中添加deposit.js文件，并在functions.php中添加如下代码完成脚本挂载：

function load_hide_deposit_script() {
  if( is_page(98) ) {
    //script location - child theme//
    wp_enqueue_script( 'js-file', get_stylesheet_directory_uri() . '/deposit.js');
  }
}
add_action('wp_enqueue_scripts', 'load_hide_deposit_script');

经开发者工具检查，脚本已成功加载。尝试了两种实现代码均未生效：

function valueChanged()
    {
        if($('.input-checkbox.thwcfe-input-field').is(":checked"))   
            $(".cart-wcdpp-fields.order-total").show();
        else
            $(".cart-wcdpp-fields.order-total").hide();
    }

$(".cart-wcdpp-fields.order-total").hide();
$(".input-checkbox.thwcfe-input-field").click(function() {
    if($(this).is(":checked")) {
        $(".cart-wcdpp-fields.order-total").show(300);
    } else {
        $(".cart-wcdpp-fields.order-total").hide(200);
    }
});

问题原因及解决方案 #

1. jQuery无冲突模式适配问题 #

WordPress默认加载的jQuery运行在无冲突模式下，$别名默认不可直接使用，未适配会直接报错导致代码不执行。
将你的JS代码包裹在兼容闭包内即可正常使用$：

jQuery(function($) {
  // 所有自定义jQuery代码都放在这个闭包内部
  $(".cart-wcdpp-fields.order-total").hide();
  // 推荐用change事件代替click，兼容键盘操作、程序触发勾选的场景
  $(".input-checkbox.thwcfe-input-field").on('change', function() {
    $(this).is(":checked") ? $(".cart-wcdpp-fields.order-total").show(300) : $(".cart-wcdpp-fields.order-total").hide(200);
  });
});

2. 动态元素事件绑定失效 #

如果复选框、押金支付字段是页面加载完成后异步渲染的（比如结算页动态加载的配送选项），直接绑定事件无法命中后续生成的元素，需要改用事件委托的写法：

jQuery(function($) {
  $(".cart-wcdpp-fields.order-total").hide();
  // 可将document替换为页面初始就存在的、包裹复选框的最近父元素，提升性能
  $(document).on('change', '.input-checkbox.thwcfe-input-field', function() {
    $(this).is(":checked") ? $(".cart-wcdpp-fields.order-total").show(300) : $(".cart-wcdpp-fields.order-total").hide(200);
  });
});

3. 脚本加载顺序错误 #

如果你的脚本加载时机早于jQuery加载，也会导致代码运行失败。修改functions.php中的挂载代码，声明jQuery依赖，让WordPress自动调整加载顺序：

function load_hide_deposit_script() {
  if( is_page(98) ) {
    // 第三个参数['jquery']声明依赖jQuery，最后一个参数true表示将脚本挂载到页脚，避免阻塞页面渲染
    wp_enqueue_script( 'js-file', get_stylesheet_directory_uri() . '/deposit.js', ['jquery'], '1.0', true );
  }
}
add_action('wp_enqueue_scripts', 'load_hide_deposit_script');

4. 选择器不匹配 #

打开浏览器开发者工具控制台，分别执行jQuery('.input-checkbox.thwcfe-input-field')和jQuery('.cart-wcdpp-fields.order-total')，确认返回结果可以正确命中目标元素，部分插件渲染的元素类名可能存在动态变化的情况，需要调整选择器适配。

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