如何合并两个jQuery change事件函数以提升性能？

嘿，我来帮你把这两段重复的jQuery脚本合并起来，既能减少冗余代码，还能优化性能～

首先看你原来的代码，两段逻辑几乎完全一致：都是监听某个特定value的input的change事件，然后根据是否选中来显示/隐藏目标面板。这种重复的代码完全可以合并成一个事件处理逻辑，具体优化方案如下：

优化后的代码（基础版） #

// 合并两个input的选择器，一次性绑定change事件
$('input[value="landed-houses"], input[value="condominiums"]').on('change', function() {
    // 检查两个选项中是否有至少一个被选中
    const hasChecked = $('input[value="landed-houses"]:checked, input[value="condominiums"]:checked').length > 0;
    // 用toggle方法简化显示/隐藏逻辑，替代if-else
    $("div[data-target='#collapse-res-feat']").parent('div.panel-info').toggle(hasChecked);
});

进一步性能优化（缓存DOM元素） #

如果这个事件会被频繁触发，建议缓存目标面板元素，避免每次事件触发都重新查询DOM（DOM查询是比较消耗性能的操作）：

// 提前缓存目标面板，只查询一次DOM
const $targetPanel = $("div[data-target='#collapse-res-feat']").parent('div.panel-info');

// 合并选择器绑定事件
$('input[value="landed-houses"], input[value="condominiums"]').on('change', function() {
    // 检查是否有选中的目标input
    const hasChecked = $('input[value="landed-houses"]:checked, input[value="condominiums"]:checked').length > 0;
    // 使用缓存的元素执行toggle操作
    $targetPanel.toggle(hasChecked);
});

优化点说明 #

• 减少事件绑定次数：原来要给两个input分别绑定事件，现在只绑定一次，减少了事件监听的开销。
• 简化逻辑判断：用jQuery的toggle()方法替代了冗余的if-else，代码更简洁易读，toggle(hasChecked)会根据布尔值自动显示或隐藏元素。
• 缓存DOM元素：避免每次事件触发都重新遍历DOM查找目标面板，提升频繁触发时的性能。

如果这两个input是同一组单选按钮的话，逻辑还可以更简化（因为单选框只能选中一个），不过上面的代码不管是复选还是单选场景都能完美适配～

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