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=“段-1”)。我还想在前一个段'F‘(class=“段-12”)和下一个段'G’(class=“段-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] (这是我使用音乐符号时所做的)。