使用jQuery單擊時的備用顏色

Question

我敢肯定有一個簡單的解決方案，而且我敢肯定這是一個重復的問題，盡管我一直無法解決我的解決方案，特別是因為我真的不知道如何用短語表達來搜索其他問題問題/解決方案，所以我來這里希望獲得幫助。

基本上，我的span帶有分配background-color屬性的類，並且在這些span內是單詞。 我有三個跨度，每當用戶單擊一個跨度時，我都希望類更改（從而更改背景顏色和內部文本）。

HTML：

<span class="alternate">
    <span class="blue showing">Lorem</span>
    <span class="green">Ipsum</span>
    <span class="red">Dolor</span>
</span>

CSS：

.alternate span { display : none }
.alternate .showing { display : inline }
.blue { background : blue }
.green { background : green }
.red { background : red }

jQuery的：

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

此解決方案在使用$.next之前效果很好，直到我單擊第三次為止。之后，刪除了.showing ，由於沒有更多的$.next選項，因此未添加。 在找到last-child ，如何將.showing添加到第first-child ，然后重新開始？ 我嘗試了各種選項，包括if($(".alternate span:last-child").hasClass("showing")) { etc. etc. } ，盡管我無法制作array和for loop但仍嘗試使用這行得通。

我知道有Newb問題，但我似乎無法解決這個問題，因此作為最后的選擇，我來了。

Answer 1

嘗試這個：

$(".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");
    });
});

http://jsfiddle.net/NPx2x/

Answer 2

對此進行檢查，它的執行速度也會更快。 如果未找到任何元素，則.next()返回undefined。

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

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

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