Javascript以循环方式移动12部分数组

Question

我正在尝试制作一个五分之一的 HTML/CSS 圆圈。我有一个分为 12 段的圆圈。

每个段都表示为一个数组，C => 1，G => 2 等等：

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

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

所以无论我点击哪个片段，我都希望能够做到这一点。

这是我目前的代码。

var fifths = {
        segments: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
        init: function(){
            this.cacheDOM();
            this.bindEvents();
        },
        cacheDOM: function(){
            this.$segments = $('.segment');
            this.$text     = $('.text');
        },
        bindEvents: function(){
            this.$segments.on('click', this.setKey.bind(this));
        },
        setKey: function(e){
            this.$text.removeClass('active');
            $(e.target).addClass('active');
            var selectedSegment = $(e.target).attr('data-segment');
            alert(this.segments.length);
            for (var i = 0; i < this.segments.length; i++) {
                alert(this.segments.slice(0, 3).join(","))
                this.segments.push(this.segments.shift());
            }
        },
    }
    fifths.init();

.circle {
        position: relative;
        border: none;
        padding: 0;
        margin: 1em auto;
        width: 500px;
        height: 500px;
        border-radius: 50%;
        list-style: none;
        overflow: hidden;
        transform: rotate(-15deg);
    }
    li {
        overflow: hidden;
        position: absolute;
        top: 0;
        right: 0;
        width: 50%;
        height: 50%;
        transform-origin: 0% 100%;
        border: 1px dashed #aaaaaa;
    }
    .text {
        position: absolute;
        left: -100%;
        width: 200%;
        height: 200%;
        text-align: center;
        transform: skewY(60deg) rotate(15deg);
        padding-top: 20px;
    }
    .text:hover {
        cursor: pointer;
    }

    li:first-child {
        transform: rotate(0deg) skewY(-60deg);
    }

    li:nth-child(2) {
        transform: rotate(30deg) skewY(-60deg);
    }
    li:nth-child(2) .circle-major {
        transform: rotate(-30deg) skewY(-60deg);
    }

    li:nth-child(3) {
        transform: rotate(60deg) skewY(-60deg);
    }
    li:nth-child(4) {
        transform: rotate(90deg) skewY(-60deg);
    }
    li:nth-child(5) {
        transform: rotate(120deg) skewY(-60deg);
    }
    li:nth-child(6) {
        transform: rotate(150deg) skewY(-60deg);
    }
    li:nth-child(7) {
        transform: rotate(180deg) skewY(-60deg);
    }
    li:nth-child(8) {
        transform: rotate(210deg) skewY(-60deg);
    }
    li:nth-child(9) {
        transform: rotate(240deg) skewY(-60deg);
    }
    li:nth-child(10) {
        transform: rotate(270deg) skewY(-60deg);
    }
    li:nth-child(11) {
        transform: rotate(300deg) skewY(-60deg);
    }
    li:nth-child(12) {
        transform: rotate(330deg) skewY(-60deg);
    }


    li:nth-child(13) {
        display: block;
        width: 100px;
        height: 100px;
        background: #ffffff;
        transform: skewY(0deg) rotate(0deg);
        border-radius: 50%;
        top: 110px;
        right: 110px;
    }

    li:hover {
        background: #2ecc71;
        border-color: #3A933A;
        color: #ffffff;
    }

    .circle-major {
        font-size: 18px;
    }

    .circle-minor {
        font-size: 14px;
    }

    .active {
        background: #2ecc71;
        color: #ffffff;
    }

    .segment-major {
        background: #CC2E4A;
        color: #ffffff;
    }

    .segment-minor {
        background: #606060;
        color: #ffffff;
    }

    .segment-diminished {
        background: #5C2ECC;
        color: #ffffff;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="circle">
    <li id="segment-1" class="segment" data-segment="1"><div class="text"><span class="circle-major">C</span><br><span class="circle-minor">A</span></div></li>
    <li id="segment-2" class="segment" data-segment="2"><div class="text"><span class="circle-major">G</span><br><span class="circle-minor">A</span></div></li>
    <li id="segment-3" class="segment" data-segment="3"><div class="text"><span class="circle-major">D</span><br><span class="circle-minor">A</span></div></li>
    <li id="segment-4" class="segment" data-segment="4"><div class="text"><span class="circle-major">A</span><br><span class="circle-minor">A</span></div></li>
    <li id="segment-5" class="segment" data-segment="5"><div class="text"><span class="circle-major">E</span><br><span class="circle-minor">A</span></div></li>
    <li id="segment-6" class="segment" data-segment="6"><div class="text"><span class="circle-major">B</span><br><span class="circle-minor">A</span></div></li>
    <li id="segment-7" class="segment" data-segment="7"><div class="text"><span class="circle-major">F#</span><br><span class="circle-minor">A</span></div></li>
    <li id="segment-8" class="segment" data-segment="8"><div class="text"><span class="circle-major">Db</span><br><span class="circle-minor">A</span></div></li>
    <li id="segment-9" class="segment" data-segment="9"><div class="text"><span class="circle-major">Ab</span><br><span class="circle-minor">A</span></div></li>
    <li id="segment-10" class="segment" data-segment="10"><div class="text"><span class="circle-major">Eb</span><br><span class="circle-minor">A</span></div></li>
    <li id="segment-11" class="segment" data-segment="11"><div class="text"><span class="circle-major">Bb</span><br><span class="circle-minor">A</span></div></li>
    <li id="segment-12" class="segment" data-segment="12"><div class="text"><span class="circle-major">F</span><br><span class="circle-minor">A</span></div></li>
    <!-- <li><div class="text"></div></li> -->
<ul>

如您所见，我被卡住了，我不知道如何将数组视为循环。

编辑：所以如果我点击第一个片段，我如何在圆圈中逆时针定位下一个片段？

Answer 1

我相信这将是% (modulo) operator 的一个绝妙用例：

var nextSegmentIndex = (segmentIndex + 1) % 12;

如果您要倒退，只需检查x < 0 或x <= 0 并在需要时添加12（在使用% 运算符之前）。您可能需要在 [0, 11] 范围内填充数组，而不是 [1, 12]（这是我在使用乐谱时所做的）。