有关在不同领域更改类的Javascript / Jquery逻辑

Question

我想弄出一些东西。我有10个按钮。按钮看起来如下，但具有不同的类

<button id="1" class="btn active"></button>

现在每个按钮都在一个区域中。我已经定义了这些区域

var areaOne = [1, 2];
var areaTwo = [3, 4, 5];
var areaThree = [6, 7, 9];
var areaFour = [8, 10];

现在我也可以做我需要的大部分工作，但我想有效地做到这一点 每个区域应该只有一个按钮，该类处于活动状态。 所有其他按钮应该使类不活动和悸动。 如果单击非活动按钮，则应删除非活动和跳动并添加活动类。但是，此按钮区域中的原始活动按钮则需要变为非活动状态并使类别悸动。

目前我有以下

$(".btn").click( function(){
    if ($( this ).hasClass("inactive")) {
        $( this ).removeClass("inactive");
        $( this ).removeClass("throb");
        $( this ).addClass("active");
    }
});

这样可以使非活动类处于活动状态。我不知道这是否是最好的方法，或者它是否更干净？我现在不太确定的是使点击按钮区域中的活动类处于非活动状态。我可以获得点击的按钮ID，但是我需要以某种方式循环此区域内的按钮以找到原始的活动按钮并使其无效。

我将如何实现这样的目标？

由于