如何简化含循环索引类名与ID的重复jQuery代码？

核心优化思路 #

1. 合并重复选择器：将执行相同操作的多个DOM选择器用逗号合并，减少重复的DOM调用
2. 提取通用操作函数：把重复的addClass/removeClass逻辑封装成独立函数，消除代码冗余
3. 统一事件绑定：利用自定义data-*属性区分不同分类的触发链接，通过单个事件处理函数完成所有分类切换逻辑，避免重复编写多个点击事件

优化后的完整代码 #

// 封装通用的显示/隐藏逻辑函数
function showElements(selector) {
  $(selector).addClass('d-flex').removeClass('d-none');
}

function hideElements(selector) {
  $(selector).addClass('d-none').removeClass('d-flex');
}

// 初始状态：隐藏card-loop2/3/4
hideElements('.card-loop2, .card-loop3, .card-loop4');

// 新闻更新链接的点击逻辑
$('#newsUpdateLink').on('click', function() {
  // 显示所有分类下的card-loop1
  showElements('[class^="category-loop"].card-loop1');
  // 隐藏card-loop2/3/4
  hideElements('.card-loop2, .card-loop3, .card-loop4');
});

// 分类链接的统一点击逻辑（需提前给分类链接添加data-category属性）
$('#categoryLink1, #categoryLink2, #categoryLink3, #categoryLink4').on('click', function() {
  const categoryNum = $(this).data('category');
  // 显示当前分类下的所有card-loop
  showElements(`.category-loop${categoryNum}.card-loop1, .category-loop${categoryNum}.card-loop2, .category-loop${categoryNum}.card-loop3, .category-loop${categoryNum}.card-loop4`);
  // 隐藏其他分类的所有元素
  hideElements(`.category-loop:not(.category-loop${categoryNum})`);
});

对应HTML修改说明 #

需要给每个分类链接添加data-category属性，用来标识对应的分类编号，示例如下：

<a id="categoryLink1" data-category="1">分类1</a>
<a id="categoryLink2" data-category="2">分类2</a>
<a id="categoryLink3" data-category="3">分类3</a>
<a id="categoryLink4" data-category="4">分类4</a>

可选进阶优化 #

如果card-loop的编号是连续的1-4，还可以通过循环生成选择器，进一步简化代码：

// 替换分类点击逻辑中的showElements调用
const targetSelectors = Array.from({length:4}, (_, i) => `.category-loop${categoryNum}.card-loop${i+1}`).join(',');
showElements(targetSelectors);

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