如何合并包含if条件的jQuery事件与初始化逻辑避免代码冗余

实现方案 #

核心思路是把重复的业务逻辑抽离为独立的公共函数，两个触发场景分别调用即可，仅需维护一份逻辑代码。

合并后的完整代码

$(document).ready(function() {
  // 封装公共处理逻辑，仅需编写一次
  function handleSelectSubmit() {
    const selectVal = $("input[name='select']:checked").val();
    // 非空判断，无选中值时直接终止执行，等价于你原有的页面加载判断逻辑
    if (!selectVal) return;

    $.ajax({
      type: "POST",
      url: "script.class.php",
      data: { select: selectVal },
      cache: false,
      success: function(data) {
        // 所有公共业务操作统一写在这里
      },
      error: function(xhr, status, error) {
        console.error(xhr);
      }
    });
  }

  // 绑定单选按钮点击触发
  $("input[name='select']").click(handleSelectSubmit);

  // 页面加载时直接触发一次，满足有选中值就执行的需求
  handleSelectSubmit();
});

可选简化写法

如果不需要额外复用逻辑，也可以直接在绑定事件后主动触发一次点击，效果完全一致：

$(document).ready(function() {
  $("input[name='select']").click(function() {
    const selectVal = $("input[name='select']:checked").val();
    if (!selectVal) return;
    $.ajax({
      // 原有逻辑保持不变
    });
  // 筛选已选中的单选按钮主动触发点击，自动处理无选中值的场景
  }).filter(":checked").trigger("click");
});

两种方案都完全消除了重复代码，更推荐第一种抽离公共函数的写法，后续如果有其他场景需要触发相同逻辑，直接调用函数即可，可维护性更高。

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