Javascript 在不重复的情况下设置优雅相似的语句

我正在使用JavaScript中的下一个代码为id设置类，每次我只需要一个

div

将与border类一起使用：

 if (counter) {
            $('#car1').addClass('border');
            $('#car2').removeClass('border');
        }
        else {
            $('#car2').addClass('border');
            $('#car1').removeClass('border');
        }

计数器

它只是一个布尔变量，可以是任何东西

---

我想知道，我能做得更优雅些吗？

一个案例陈述怎么样

switch(counter)
{
  case 1:
   $('#car1').addClass('border');
   $('#car2').removeClass('border');
   break;
  case 2:
    $('#car2').addClass('border');
    $('#car1').removeClass('border');
   break;
  default:
   ....
}

---

如果

计数器

是布尔值，则可以将其用作toggleClass的开关：

$('#car1').toggleClass('border', counter);
$('#car2').toggleClass('border', !counter);

--->

.toggleClass（类名、开关）

“开关”：布尔值一个布尔值（不仅仅是 truthy/falsy）值，以确定是否应添加或删除类 删除

---

什么是

计数器

，为什么要在同一个元素上添加和删除同一个类？代码对我来说毫无意义。您在同一元素中添加和删除同一类（边框），这意味着您在任何时候都不会有类边框。您似乎想在

#car1

上设置

边框

，然后将其从

#car2

中删除……如果您只有两个元素，则此代码没有问题。代码很好，当一切都很好，可读性好，并且像预期的那样工作时，就没有必要把事情复杂化。我认为这是同一个想法……对我来说，甚至更多的代码优雅=清晰。对于新手程序员来说，可维护性=清晰性=优雅。而且它的工作方式甚至不一样。在原始代码中，如果

计数器

为truthy，则执行第一个块，如果为falsy，则执行第二个块。您不能（也不应该）使用switch语句来测试这一点。（当然，变量名有误导性。）