关于在不同区域更改类的Javascript/Jquery逻辑

我在想办法。我有10个按钮。按钮如下所示，但具有不同的类

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

现在，我也可以做我需要的大部分事情，但我想高效地做。
每个区域应该只有一个类处于活动状态的按钮。 所有其他按钮都应该使类处于非活动状态和thromb状态。 如果单击非活动按钮，则应删除非活动和thromb，并添加活动类。但是，该按钮区域内的原始活动按钮需要变为非活动状态并具有类悸动

目前我有以下几点

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

因此，这将使非活动类处于活动状态。我不知道这是最好的方法还是更干净？我现在不太确定的是使单击按钮区域中的活动类处于非活动状态。我可以得到点击的按钮id，但是我需要在这个区域内循环按钮，以找到原始的活动按钮并使其处于非活动状态

我怎样才能做到这一点

---

谢谢

我创建了一个多维数组，而不是在seprate变量中定义它们

var-arr=[[1,2]、[3,4,5]、[6,7,9]、[8,10]；
$（“.btn”）。单击（函数（）{
//获取单击的id
var _id=+this.id；
//取下按钮上的按钮
var_others=arr.filter（函数（v，i）{
返回v.indexOf（_id）！=-1
});
console.log（“#”+_其他[0]。join（“，#”）；
//创建一个类似于#1、#2的字符串，并排除该字符串，移除活动类，添加非活动类和throb
$（“#”+_其他[0]。加入（“，#”）。removeClass（“活动”）。addClass（“非活动throb”）；
//将活动类添加到单击的按钮，并删除非活动类和throb
$（this）.removeClass（“非活动throb”）.addClass（“活动”）；
});
.active{background:#ff0000；}
.inactive{background:#00ff00；}

按钮1
按钮2
按钮3
按钮4
按钮5
按钮6
按钮7
按钮8
按钮9
Buttone 10
你能为这个做个提琴吗？如果你把每个“区域”放进一个
元素或类似的元素，然后用这个父元素作为参考点来禁用所有的兄弟按钮，然后激活你点击的那个按钮，会怎么样？这是一个提琴，我觉得有点奇怪。例如，第一区。假设1处于活动状态，如果我单击2，它将变为活动状态，而1将变为非活动状态（正如它应该做的那样）。但是，如果我在其中一个上单击“上一步”，其中一个将再次变为活动状态，但这次2不会切换为非活动状态。所以它第一次有效，而不是第二次。@kate_hudson当然
2
会再次切换到非活动状态。是的，这应该会发生，但1应该会切换回活动状态，而不是现在。@kate_hudson现在试试
\u others
应该是
\u others[0]
，因为单击
1
，它将返回
[[1,2]]
而不是
[1,2]
。附上完整的代码。
$(".btn").click( function(){
    if ($( this ).hasClass("inactive")) {
        $( this ).removeClass("inactive");
        $( this ).removeClass("throb");
        $( this ).addClass("active");
    }
});