Javascript 改变不同背景的Jquery

我有以下Jquery代码…在按钮上单击它会以一定的间隔更改背景颜色…当第二次单击按钮时（第三次&以此类推），我想要的是什么？当到达最后一个按钮时，它开始显示下一组颜色。对于每一组，它应该在最后一个颜色上停止…很抱歉，需要更多详细的帮助

$(document).ready(function(){

    $("button").click(function() {
    var colors = ['blue', 'green', 'yellow', 'black'],
        colorIndex = 0,
        $body = $('body');

    setInterval(function(){ $body.css('background', colors[colorIndex++ % colors.length])}, 500);
});
});

以下是JSFIDLE链接：

---

提前谢谢

我还不完全清楚，但如果我理解了你的问题，这就可以了（）

---

那么，你想让按钮在达到最后一种颜色后不改变颜色吗？@Aamir，你能说得更清楚些吗？只需检查LightStyle的答案，然后响应它应该在最后一组上暂停，当第二次单击时，它应该显示下一次，依此类推…当到达末尾时，如果用户愿意，可以重新开始…正在编写类似的解决方案-当您的小提琴工作正常时，肯定会向您投票，但OP是否想要解除绑定单击事件在清除时间间隔后，也会打开按钮。不幸的是，“我不太清楚”。如果OP会给我一个更详细的解释，我会编辑脚本，但这是我从问题中理解的：）是的，同样的疑问。我问过OP希望他回答得更清楚谢谢你的回答亲爱的。它实现了50%的功能…我想添加更多的颜色集，如果第二次点击按钮，它应该会显示下一组颜色。。。例如，第一次单击按钮时，第二次单击时应显示“蓝色、绿色、黄色”，第二次单击时应显示“灰色、红色、白色”等…如果您仍然不清楚，请告诉我…再次感谢…您是否希望在到达列表的最后一个元素时，在新单击按钮之前停止背景更改？如果用户到达最后一组颜色，会发生什么？

$(document).ready(function () {
    var colorSets = [],
        body = $(document.body),
        colorSetsIndex = 0, //goes from 0 to the max length of colorSets
        colorIndex = 0, //goes from 0 to the max length of the current colorSet
        started = false,
        intervalId;
    //add all the sets you want
    colorSets.push(["blue", "green", "yellow"]);
    colorSets.push(["grey", "red", "purple"]);
    $(document).on('click', 'button', function () {
        if (started) return;
        started = true;
        intervalId = setInterval(function () {
            var currentSet = colorSets[colorSetsIndex];
            body.css('background', currentSet[colorIndex]);
            colorIndex += 1;
            if (colorIndex === currentSet.length) {
                colorSetsIndex++;
                colorIndex = 0;
            }
            if (colorSetsIndex === colorSets.length) {
                var restart = confirm('Restart?');
                if (!restart) {
                    clearInterval(intervalId);
                    $("button").off('click');
                    return;
                }
                colorSetsIndex = 0;
                colorIndex = 0;
            }
        }, 500);
    });
});