One issue is that you cannot use .hasClass() directly on this; it must be a jQuery object, like $(this). Simplifying the code for just 3 states is challenging; however, an updated version would look like this:

$("li").click(function () {
  var $this = $(this);
  if ($this.hasClass ("red")) 
    $this.removeClass("red")
  if ($this.hasClass ("green")) {
    $this.toggleClass("red green");
  } else {
    $this.addClass("green")
  }
});

.toggleClass() serves as a handy shortcut for toggling both classes at once by swapping them.

Below is a handy function I often use in both JavaScript and CoffeeScript:

$.fn.updateClasses = function() {
  var classes, currentClass, nextClass, _this = this;
  classes = Array.prototype.slice.call(arguments);

  currentClass = $.grep(classes, function(klass) {
    return _this.hasClass(klass);
  }).pop();

  nextClass = classes[classes.indexOf(currentClass) + 1] || classes[0];

  this.removeClass(currentClass);
  return this.addClass(nextClass);
};

In CoffeeScript:

$.fn.updateClasses = (classes...) ->
  currentClass = $.grep classes, (klass) =>
    this.hasClass(klass)
  .pop()

  nextClass = classes[classes.indexOf(currentClass) + 1] || classes[0]

  this.removeClass(currentClass)
  this.addClass(nextClass)

Usage example:

$('.someElement').updateClasses('red', 'blue', 'green')

Declare a variable called "classNum" to act as a cursor that moves through each element in an array representing different states. Although untested, the code demonstrates the basic concept.

var classes = ["default", "red", "green"];
$("li").click(function () {
  var classNum = $(this).data("classNum") || 0;
  $(this).removeClass(classes[classNum]);
  classNum = (classNum + 1) % classes.length;
  $(this).addClass(classes[classNum]);
  $(this).data("classNum", classNum);
});

One of the beauties of programming is its ability to mirror your thought process. Instead of using conditional tests, focus on creating codes that illustrate recurring patterns like the one you mentioned as a "loop" in your explanation. As you advance in your programming journey, you will find yourself relying less on "if" statements.

Toggle is a great solution! It can help maintain the internal state for you effortlessly.

Here is the perfect example you're looking for: http://api.jquery.com/toggle/ "Example: Click to toggle highlight on the list item"

$('li').toggle(function() {
    $(this).addClass('green');
}, function() {
    $(this).toggleClass('green red');
}, function() {
    $(this).removeClass('red');
});

Have you heard about the cycleClass jQuery plugin? It's perfect for what you're looking for...

Check it out on GitHub: https://github.com/keithmgould/cycleClass

You can also find this useful jQuery plugin in the repository here: plugins.jquery.com/project/cycleClass

Warm regards,

Keith

PS: For more information, take a look at the documentation below:

Example: $("#linky").cycleClass(["foo","bar","jonez"]);

How it works: If "linky" has any of the classes listed in the array, all existing classes will be removed. The next class after the last one found will be added (based on modulus calculation).

Possible scenarios:

• If "foo" is found, it will be replaced with "bar"
• If "jonez" is found, it will be replaced with "foo"
• If both "bar" and "jonez" are found, they will be replaced with "foo"
• If none of the classes are found, "foo" (first element) will be added

This unique jQuery script, not a typical plugin, is designed to cycle through multiple classes specified as a comma-separated values within the cycler element's data-classes attribute. When toggling between two classes, it operates like a toggle switch. If you start with a class that is not listed, the initial state remains unaltered.

Simply initiate the cycling process with $(selector).cycleClass().

In my case, I utilize a server-side template engine which explains the presence of {{#objModel}} and {{/objModel}} in the code - feel free to remove them if unnecessary for your setup.

This versatile script can be applied to any element that has both class and data-* attributes. The example below includes a button that cycles through different classes on a code block, but the functionality could easily be bound to the button itself for changing its own class.

I initially shared this script as a response to the toggle class question before delving into the concept of cycling classes.

You can witness this script in action at www.PluginExamples.com.

{{#objModel}}
    <style>
        #cycler.A code {outline:3px solid red;}
        #cycler.B code {outline:3px solid blue;}
        #cycler.C code {outline:3px dotted green;}
        #cycler.D code {outline:3px dotted red;}
        #cycler.E code {outline:3px dashed blue;}
        #cycler.F code {outline:3px dashed green;}
    </style>
    <button onclick="$('#cycler').cycleClass();">Cycle</button>
 <div id="cycler" data-classes=",A,B,C,D,E,F">
            <code 
                id="cycleClass"
>&lt;div id="cycler" data-classes=",A,B,C,D,E,F,"&gt;...&lt;/div&gt;

&lt;button onclick="$('#cycler').cycleClass();"&gt;Cycle&lt;/button&gt;

$( ".cycler" ).cycleClass();

$.fn.cycleClass = function(){
    if( !$(this).data("aClasses") ){
        var classes = $(this).attr("data-classes").split(",");
        $(this).data("aClasses", classes);
        $(this).data("classes", classes.join(" "));
        $(this).data("class", classes.length);
    }
    $(this).data("class",($(this).data("class")+1) % $(this).data("aClasses").length);
    $(this).removeClass($(this).data("classes"))
        .addClass( $(this).data("aClasses")[$(this).data("class")] );
    return $(this);
}
            </code>
</div>   
    <script>
           (function($){
                $.fn.cycleClass = function(){
                    if( !$(this).data("aClasses") ){
                        var classes = $(this).attr("data-classes").split(",");
                        $(this).data("aClasses", classes);
                        $(this).data("classes", classes.join(" "));
                        $(this).data("class", classes.length);
                    }
                    $(this).data("class",($(this).data("class")+1) % $(this).data("aClasses").length);
                    $(this).removeClass($(this).data("classes"))
                        .addClass( $(this).data("aClasses")[$(this).data("class")] );
                    return $(this);
                }
            });
    </script>    
{{/objModel}}


  [1]: http://www.pluginexamples.com

The foundation of classic logic style -

$(".toCycle").click(function(){
    var spinner = this;
    var colors = ["bg-default", "bg-warning", "bg-success", "bg-danger"];

    var classList = $(this).attr("class").split(/\s+/);
    $.each(classList, function(index, item) {
        var i = colors.indexOf(item);
        var n;
        if (i > -1) {
            $(spinner).removeClass(item);
            n = i+1;
            if (n == colors.length) //manage the cycle
                n = 0;
            $(spinner).addClass(colors[n]);
        }
    });
});