jQuery页面加载时检测LastName字段值显示指定字段失效问题

问题背景 #

现有脚本实现了「用户在Last Name字段输入内容时，显示#d_o_b1_field、#billing_phone_field、#gender1_field三个字段」的功能：

<script>
jQuery(function($){
  $("#d_o_b1_field, #billing_phone_field, #gender1_field").hide();
  $("#billing_last_name_field").on('keyup', function(){
    $("#d_o_b1_field, #billing_phone_field, #gender1_field").show();
  });
});
</script>

需要新增需求：页面加载时如果Last Name字段已有内容，也自动显示这三个字段。但GPT推荐的代码未生效，页面加载时即使Last Name字段有值，三个字段仍处于隐藏状态：

jQuery(function($){
  $("#d_o_b1_field, #billing_phone_field, #gender1_field").hide();
  $("#billing_last_name_field").ready(function(){
    if($(this).val()){
      $("#d_o_b1_field, #billing_phone_field, #gender1_field").show();
    }
  });
  $("#billing_last_name_field").on('keyup', function(){
    $("#d_o_b1_field, #billing_phone_field, #gender1_field").show();
  });
}); 

失效核心原因 #

1. 错误使用.ready()方法：jQuery的.ready()方法仅用于监听document的DOM加载完成事件，不能绑定到普通DOM元素（比如#billing_last_name_field）上。普通DOM元素不存在ready事件，所以这段绑定的回调函数永远不会被执行。
2. 逻辑冗余且错误：jQuery(function($){...})本身就是页面DOM加载完成后的执行入口，在这个回调内部，DOM元素已经可以被访问，不需要再给单个元素绑定ready事件。

修正后的代码 #

把检查字段值的逻辑直接放在页面加载完成的回调里，同时封装显示/隐藏逻辑避免重复代码：

<script>
jQuery(function($){
  const targetFields = $("#d_o_b1_field, #billing_phone_field, #gender1_field");
  const lastNameField = $("#billing_last_name_field");

  // 初始化隐藏目标字段
  targetFields.hide();

  // 定义显示/隐藏逻辑的函数
  function toggleTargetFields() {
    if (lastNameField.val().trim()) {
      targetFields.show();
    } else {
      // 可选：如果Last Name字段被清空，重新隐藏字段
      targetFields.hide();
    }
  }

  // 页面加载完成后立即检查一次
  toggleTargetFields();

  // 监听输入事件触发逻辑
  lastNameField.on('keyup', toggleTargetFields);
});
</script>

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