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

Question

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

每个片段表示为数组，C =＆gt; 1，G =＆gt; 2等等：

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

当我点击一个片段时，以C（1）为例，我想在该片段中添加一个类（class =＆＃34; segment-1＆＃34;）。我还想在上一部分中添加一个课程＆＃39; F＆＃39; （class =＆＃34; segment-12＆＃34;）和下一个细分＆＃39; G＆＃39; （类=＆＃34;段2＆＃34）。然后我想为段3,4和5添加一个不同的类，最后将不同的类添加到段6.它看起来像这样：

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

到目前为止，这是我的代码。

＆＃13;

＆＃13;

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();

＆＃13;

.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;
    }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

正如你所看到的那样，我被困住了，我不知道如何将数组视为循环。

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

Answer 1

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

var nextSegmentIndex = (segmentIndex + 1) % 12;

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