Javascript以循环方式在由12部分组成的数组中移动

我正在尝试做一个五分之一的HTML/CSS循环。我把一个圆分成12段

每个段表示为一个数组，C=>1，G=>2，依此类推：

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

当我单击一个段时，以C（1）为例，我想向该段添加一个类（class=“段-1”）。我还想在前一段“F”（class=“段-12”）和下一段“G”（class=“段-2”）中添加一个类。然后我想在第3、4和5段中添加一个不同的类，最后在第6段中添加不同的类。它看起来是这样的：

因此，我希望能够做到这一点，无论我点击哪个部分

这是到目前为止我的代码

var五分之一={
部分：[1,2,3,4,5,6,7,8,9,10,11,12]，
init:function（）{
this.cacheDOM（）；
这是bindEvents（）；
},
cacheDOM:function（）{
这.$segments=$（'.segments'）；
此.$text=$（'.text'）；
},
bindEvents:function（）{
this.$segments.on（'click'，this.setKey.bind（this））；
},
设置键：功能（e）{
此.text.removeClass（'active'）；
$（e.target）.addClass（'active'）；
var selectedSegment=$（e.target）.attr（'data-segment'）；
警报（this.segments.length）；
对于（var i=0；i
.circle{
位置：相对位置；
边界：无；
填充：0；
保证金：1em自动；
宽度：500px；
高度：500px；
边界半径：50%；
列表样式：无；
溢出：隐藏；
变换：旋转（-15度）；
}
李{
溢出：隐藏；
位置：绝对位置；
排名：0；
右：0；
宽度：50%；
身高：50%；
变换原点：0%100%；
边框：1px虚线#aaaaa；
}
.文本{
位置：绝对位置；
左-100%；
宽度：200%；
身高：200%；
文本对齐：居中；
变换：倾斜（60度）旋转（15度）；
填充顶部：20px；
}
.文本：悬停{
光标：指针；
}
李：第一个孩子{
变换：倾斜旋转（0度）（-60度）；
}
李：第n个孩子（2）{
变换：倾斜旋转（30度）（-60度）；
}
李：第N个孩子（2）。圈大调{
变换：旋转（-30度）倾斜（-60度）；
}
李：第n个孩子（3）{
变换：倾斜旋转（60度）（-60度）；
}
李：第n个孩子（4）{
变换：倾斜旋转（90度）（-60度）；
}
李：第n个孩子（5）{
变换：倾斜旋转（120度（-60度）；
}
李：第n个孩子（6）{
变换：倾斜旋转（150度）（-60度）；
}
李：第n个孩子（7）{
变换：倾斜旋转（180度（-60度）；
}
李：第n个孩子（8）{
变换：倾斜旋转（210度）（-60度）；
}
李：第n个孩子（9）{
变换：倾斜旋转（240度）（-60度）；
}
李：第n个孩子（10）{
变换：倾斜旋转（270度）（-60度）；
}
李：第n个孩子（11）{
变换：倾斜旋转（300度）（-60度）；
}
李：第n个孩子（12）{
变换：倾斜旋转（330度）（-60度）；
}
李：第n个孩子（13）{
显示：块；
宽度：100px；
高度：100px；
背景：#ffffff；
变换：倾斜（0度）旋转（0度）；
边界半径：50%；
顶部：110px；
右：110px；
}
李：悬停{
背景：#2ecc71；
边框颜色：#3A933A；
颜色：#ffffff；
}
大圆圈{
字号：18px；
}
.小圆{
字体大小：14px；
}
.主动{
背景：#2ecc71；
颜色：#ffffff；
}
.分部专业{
背景：#CC2E4A；
颜色：#ffffff；
}
.小段{
背景#606060；
颜色：#ffffff；
}
.细分市场减少{
背景：#5C2ECC；
颜色：#ffffff；
}


C
A
G
A
D
A
A
A
E
A
B
A
F#
A
Db
A
Ab
A
Eb
A
Bb
A
F
A
我相信这将是一个非常好的用例：

如果您要倒退，只需检查
x<0
或
x这是
%
mod运算符的完美用例。加/减之后，只需将结果修改12。例如，如果单击段11，接下来的3个段是
（11+1）%12
，
（11+2）%12
，和
（11+3）%12
。您可能应该将
数据段
属性重新编号为基于0，以便它们与基于零的数组索引相匹配。这会让你的生活更轻松。
var nextSegmentIndex = (segmentIndex + 1) % 12;