如何用最简洁的jQuery代码实现条件性添加/移除CSS类？

嘿，这段重复的if-else代码确实显得臃肿，咱们可以用jQuery的选择器和批量操作来大幅简化它，让代码更易读也更易维护。

核心优化思路 #

• 先统一移除所有myManyDiv系列元素的visible类，再给目标元素单独添加——不用一个个写移除操作
• 根据whatever的值，用更简洁的条件判断处理divSome和divMany的displayNone类

优化后的代码 #

// 第一步：处理myManyDiv系列的visible类
$('[id^="myManyDiv"]').removeClass('visible'); // 一次性移除所有myManyDiv的visible类
$('#myManyDiv' + whatever).addClass('visible'); // 给对应索引的元素添加visible类

// 第二步：处理divSome和divMany的displayNone类
if (whatever === "2") {
  $('#divSome').removeClass('displayNone');
  $('#divMany').addClass('displayNone');
} else {
  $('#divSome').addClass('displayNone');
  $('#divMany').removeClass('displayNone');
}

代码细节解释 #

1. [id^="myManyDiv"]选择器：这是jQuery的属性前缀选择器，能一次性选中所有id以myManyDiv开头的元素，直接省去了11次重复的removeClass调用
2. 动态目标元素：通过$('#myManyDiv' + whatever)直接拼接出目标元素的id，不管whatever是0/1/2都能精准命中
3. 合并重复分支：把0和1的逻辑合并成一个分支，只单独处理2的特殊情况，砍掉了冗余的判断代码

如果想追求极致简洁，还可以用toggleClass的布尔参数把第二步写成更紧凑的形式：

// 用toggleClass的第二个布尔参数控制类的添加/移除
$('#divSome').toggleClass('displayNone', whatever !== "2");
$('#divMany').toggleClass('displayNone', whatever === "2");

是不是比原来的冗长代码清爽太多啦？

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