如何精简以下重复的jQuery代码？求高效实现方案

嘿，先给你指出原代码里的一个小问题：jQuery的click()方法只接受一个回调函数，你写的第二个用来移除类的函数其实根本不会被执行哦，这是个很容易踩的小坑～

接下来咱们一步步优化这段重复率极高的代码，核心思路是消除冗余、利用DOM遍历减少重复查询、修正事件绑定的错误写法：

先明确需求（从代码推断） #

看起来你是想给每个.wsite-nav-*分组下的<a>元素绑定点击事件，点击时切换该分组内所有<a>的show类？如果是这样，咱们可以这么优化：

优化方案1：合并选择器+DOM遍历（静态元素场景） #

// 一次性选中所有目标a元素，绑定统一的点击事件
$('#nav [class^="wsite-nav-"] a').click(function() {
  // 找到当前点击元素所属的父级nav分组，只操作该组内的a元素
  $(this).closest('[class^="wsite-nav-"]').find('a').toggleClass('show');
});

优化方案2：事件委托（动态元素场景） #

如果你的导航元素是动态加载的（比如通过AJAX添加），推荐用事件委托绑定到父级#nav上，这样新添加的元素也能触发事件：

$('#nav').on('click', '[class^="wsite-nav-"] a', function() {
  $(this).closest('[class^="wsite-nav-"]').find('a').toggleClass('show');
});

如果需求是点击单个a切换自身的类 #

要是你其实想实现“点击哪个a就给哪个a加/移除show类”，代码会更简洁：

$('#nav [class^="wsite-nav-"] a').click(function() {
  $(this).toggleClass('show');
});

优化点说明 #

• 消除冗余代码：用属性选择器[class^="wsite-nav-"]一次性匹配所有以wsite-nav-开头的分组，不用重复写4次几乎一样的选择器和事件绑定。
• 减少DOM查询：原代码每次点击都重新查询整个分组的a元素，优化后通过closest()和find()基于当前点击元素做DOM遍历，性能更好，也更精准。
• 修正事件写法错误：用toggleClass()一行完成类的切换逻辑，替代原代码中无效的“双回调”写法（jQuery的click()不支持同时传两个回调函数）。
• 扩展性更强：后续新增wsite-nav-5、wsite-nav-6这类分组，不需要修改JS代码，自动生效。

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