如何结合jQuery的each()方法与change()事件实现初始化及值变更的回调逻辑

嘿，这个需求太常见了——既要在页面加载时初始化处理元素，又要在元素值变化时重复相同逻辑，还得在变化时多跑个额外函数对吧？给你个最清晰易维护的解决方案：

你说得对，each()是jQuery的遍历方法而非事件，没法用on()来绑定。最优雅的做法是把重复的回调逻辑单独封装成函数，然后分别在初始化遍历和change事件里调用它，同时在change事件里额外执行_display。

具体实现代码 #

// 把重复的处理逻辑封装成独立函数，参数是当前操作的元素
function updateFilterState(element) {
  const compare = _compare(element.value);
  // 先获取已有的filter数据，避免初始值为undefined的问题
  const filterData = $crud.data('filter') || {};
  
  if (compare[0] !== null) {
    $crud.data('filter', {
      ...filterData,
      [element.name]: { operator: compare[0], value: compare[1] }
    });
    $(element).closest('.crud-filter').addClass('filtered');
  } else {
    $crud.data('filter', {
      ...filterData,
      [element.name]: { operator: null, value: null }
    });
    $(element).closest('.crud-filter').removeClass('filtered');
  }
}

// 1. 初始化阶段：遍历所有目标元素，执行处理逻辑
const $filterElements = $crud.find('input.filter,output.filter,select.filter,textarea.filter');
$filterElements.each(function() {
  updateFilterState(this);
});

// 2. 绑定change事件：先执行通用逻辑，再调用额外的_display函数
$filterElements.change(function() {
  updateFilterState(this);
  _display($crud, true);
});

为什么这么做？ #

• 代码复用：把重复的逻辑抽成函数后，不管是初始化还是事件触发，都调用同一个函数，后续修改逻辑只需要改这一处，避免重复代码带来的维护麻烦。
• 逻辑清晰：初始化和事件触发的职责分开，一眼就能看懂代码在做什么。
• 兼容性好：不需要依赖特殊事件，所有jQuery版本都能正常运行。

如果你想让代码更紧凑，也可以把初始化和事件绑定写成链式调用：

$crud.find('input.filter,output.filter,select.filter,textarea.filter')
  .each(function() { updateFilterState(this); })
  .change(function() {
    updateFilterState(this);
    _display($crud, true);
  });

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