Javascript 使用jQuery单击时使用其他颜色

我确信这有一个简单的解决方案，我确信这是一个重复的问题，尽管我一直无法解决我的解决方案，特别是因为我真的不知道如何表达它以搜索其他问题/解决方案，所以我来这里希望得到一些帮助

基本上，我有

span

s，其中的类分配了

背景色

属性，这些

span

s中是单词。我有三个跨距，每次用户单击跨距时，我都希望类改变（从而改变背景颜色和内部文本）

HTML:

jQuery：

此解决方案使用

$非常有效。下一步

，直到第三次单击后，

之后。显示

将被删除，并且不会添加，因为没有更多的

$。下一步

选项。在到达

最后一个子项

后，如何将

添加到
第一个子项
，然后重新开始？我尝试了各种选项，包括
if（$（“.alternate span:last child”）.hasglass（“showing”）{etc.}
，我尝试使用
数组和
for循环
，但没有成功

新手问题，我知道，但我似乎无法解决这个问题，所以作为最后手段，我来这里。
试试这个：

$(".alternate span").each(function() {
   $(this).on("click", function() {
        $(this).removeClass("showing");

        if($(this).is(":last-child"))
            $(".alternate span:first-child").addClass("showing");
        else
            $(this).next().addClass("showing");
    });
});

检查此项，它的性能也会更快
.next（）
如果未找到元素，则返回未定义

$(".alternate span").on("click", function() {

    $(this).removeClass("showing");
     var next = $(this).next();

     next.length ? next.addClass("showing") : $("span.blue").addClass("showing");    
});

谢谢这起作用了。这实际上和我以前试过的很相似，但我想我在什么地方做错了什么。再次感谢！
$(".alternate span").each(function() {
    $(this).on("click", function() {
        $(this).removeClass("showing");
        $(this).next().addClass("showing");
    });
});

$(".alternate span").each(function() {
   $(this).on("click", function() {
        $(this).removeClass("showing");

        if($(this).is(":last-child"))
            $(".alternate span:first-child").addClass("showing");
        else
            $(this).next().addClass("showing");
    });
});

$(".alternate span").on("click", function() {

    $(this).removeClass("showing");
     var next = $(this).next();

     next.length ? next.addClass("showing") : $("span.blue").addClass("showing");    
});