WooCommerce中使用jQuery无法隐藏账单表单元素及对应标签问题

• 事件绑定的选择器缺失id标识符#，且下拉选择框优先使用change事件保证触发稳定性
• 选择器内错误使用HTML转义实体"代替原生双引号，导致元素匹配失败
• 存在多处选择器拼写错误：label[for="billing_complex_address_inside]缺失闭合双引号，else分支下的#billing_complex_complex_name多写了重复的complex_前缀
• WooCommerce账单字段默认包裹在form-row类的父容器内，仅隐藏input和label会残留容器占位间隙，建议直接隐藏整行容器

修正后可运行代码 #

jQuery(document).ready(function($){
  // 下拉框绑定change事件，选择器补全#标识
  $(document).on('change', '#billing_condition', function() {
    mySecFunc();
  })

  function mySecFunc() {
    if($('#billing_condition').val() == 'house'){
      // 隐藏小区相关字段整行
      $('.form-row:has(#billing_complex_name)').hide();
      $('.form-row:has(#billing_complex_address)').hide();
      $('.form-row:has(#billing_complex_address_inside)').hide();
      // 显示常规地址字段
      $('.form-row:has(#billing_address_1)').show();
    }else{
      // 隐藏常规地址字段整行
      $('.form-row:has(#billing_address_1)').hide();
      // 显示小区相关字段
      $('.form-row:has(#billing_complex_name)').show();
      $('.form-row:has(#billing_complex_address)').show();
      $('.form-row:has(#billing_complex_address_inside)').show();
    }
  }
  // 页面初始化时执行一次，匹配下拉框初始选中值
  mySecFunc();
})

如果主题没有使用WooCommerce标准的form-row容器，可换回单独隐藏label和input的写法，只需修正原代码中的选择器拼写和转义错误即可正常生效。

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