多选择器同jQuery代码优化求助：精简代码并提升运行效率

嘿，刚接触jQuery的话，把重复代码合并确实能让你的脚本更清爽！我先给你分享几个通用的优化思路，再拿常见的相邻元素操作举例子，你可以对照自己的代码来调整～

核心优化思路 #

• 复用DOM查询结果：多次用到的元素选择器，先存成变量，避免重复遍历DOM树，提升性能
• 事件委托替代逐个绑定：相邻同类型元素（比如按钮、列表项），通过父元素统一绑定事件，代码更精简还支持动态生成的元素
• 链式调用简化代码：jQuery支持链式操作，把对同一元素的多个方法调用连在一起写
• 抽离通用逻辑成函数：功能相似的代码块，封装成带参数的函数，减少重复代码

示例：相邻元素点击切换类名 #

假设你的原始代码是这样（给每个相邻元素单独绑定点击事件）：

// 原始代码
$('.nav-item-1').click(function() {
  $(this).addClass('active').siblings().removeClass('active');
});

$('.nav-item-2').click(function() {
  $(this).addClass('active').siblings().removeClass('active');
});

$('.nav-item-3').click(function() {
  $(this).addClass('active').siblings().removeClass('active');
});

优化方案1：批量绑定事件 #

先获取所有目标元素的集合，一次性绑定事件：

// 优化后：复用选择器，批量绑定
const $navItems = $('.nav-item-1, .nav-item-2, .nav-item-3');
// 如果这些元素有共同父元素，用父元素选择更高效：$('.nav-container .nav-item')

$navItems.click(function() {
  $(this).addClass('active').siblings().removeClass('active');
});

优化方案2：事件委托（更推荐） #

通过父元素代理事件，哪怕后续动态添加新的nav-item也能生效：

// 事件委托写法
$('.nav-container').on('click', '.nav-item', function() {
  $(this).addClass('active').siblings().removeClass('active');
});

示例：相邻按钮切换对应内容 #

如果你的代码是按钮和内容一一对应，原始代码可能是：

// 原始代码
$('.tab-btn-1').click(function() {
  $('.tab-content-1').show().siblings('.tab-content').hide();
});

$('.tab-btn-2').click(function() {
  $('.tab-content-2').show().siblings('.tab-content').hide();
});

优化方案：利用data属性关联元素 #

给按钮添加data-target属性指向对应内容的ID，然后用通用逻辑处理：

<!-- HTML结构调整 -->
<button class="tab-btn" data-target="content-1">按钮1</button>
<button class="tab-btn" data-target="content-2">按钮2</button>

<div class="tab-content" id="content-1">内容1</div>
<div class="tab-content" id="content-2">内容2</div>

// 优化后的JS代码
$('.tab-btn').click(function() {
  const targetContent = $(`#${$(this).data('target')}`);
  targetContent.show().siblings('.tab-content').hide();
});

这样不管你有多少个相邻的按钮和内容，只需要一段代码就能处理啦！

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