如何合并3个change事件以实现符合条件时隐藏目标div

要实现3个元素状态全部修改满足条件后才控制div显隐，核心是要避免单元素独立触发带来的状态不同步问题，通过统一监听全量元素、集中校验状态的方式实现，具体操作如下：

• 统一绑定事件：把所有需要参与状态校验的3个元素，通过jQuery选择器统一选中，一次性绑定change事件，避免重复写多段重复的绑定代码
• 抽离独立校验函数：把显隐判断逻辑抽成独立函数，函数内依次读取3个元素的当前状态，判断是否全部满足显示要求，校验通过则显示目标div，否则隐藏
• 补充初始状态校验：页面加载完成后先执行一次校验逻辑，避免页面初始加载时div的显示状态和实际元素状态不匹配

参考实现代码 #

// 定义所有需要监听状态的元素，逗号分隔拼接成统一选择器
const monitorElements = '#Choice, #Choice2, #Choice3';
const targetDiv = $('#myDivArea');

// 统一校验逻辑：所有条件满足才显示div
function toggleTargetDiv() {
  // 替换为对应3个元素的实际判断条件即可
  const meetCond1 = $('#Choice').val() === 'Option 1';
  const meetCond2 = $('#Choice2').val() === '对应选项值';
  const meetCond3 = $('#Choice3').is(':checked'); // 复选框/单选按钮用这个判断选中状态

  if (meetCond1 && meetCond2 && meetCond3) {
    targetDiv.show();
  } else {
    targetDiv.hide();
  }
}

// 给所有关联元素绑定状态变动事件，一旦变动就执行全量校验
$(monitorElements).on('change', toggleTargetDiv);

// 页面加载完成先执行一次校验，修正初始显示状态
toggleTargetDiv();

注意事项 #

• 原代码中显隐后拼接的.blur().change()属于无实际必要的链式调用，div本身不支持焦点交互，blur逻辑完全不会生效，还会额外触发无关事件逻辑，没有特殊依赖的话可以直接移除
• 不要把显隐判断逻辑拆到每个元素的独立回调里，很容易出现单元素状态变动时，其他两个元素状态未同步、导致div显隐逻辑出错的问题
• 后续调整判断条件时，只需要修改toggleTargetDiv函数内的三个状态判断逻辑即可，不需要调整事件绑定部分的代码

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