JQuery click-through class cycle

Question

I'm trying to make a cycle so that if you click on a list item it goes green, if clicked again it goes red, once more and it goes into its original state, there are some items in the list that will already have either green or red classes. So far I've written this but it isn't working:

$(document).ready(function () {
$("li").click(function () {
    if (this.hasClass ("red")) {
        $(this).removeClass("red")
        }
    if (this.hasClass ("green")) {
        $(this).addClass("red").removeClass("green")
        }
    else ($(this).addClass("green"))
}); });

Thank you for your help.

**isn't working** is not a description of a problem. ps: why do you use `this` as well as `$(this)`? — zerkms, Aug 12 '10 at 00:59

Nick Craver · Answer 1 · 2010-08-12T01:13:22.567

The problem is you can't use .hasClass() on this, it needs to be a jquery object, e.g. $(this). You really can't simplify it much more than you have for just 3 states, the fixed 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() is just a shortcut for toggling both, effectively swapping them.

score 3 · Answer 2 · edited Jan 05 '17 at 13:51

Here's one I use. In JavaScript:

$.fn.cycleClasses = 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.cycleClasses = (classes...) ->
  currentClass = $.grep classes, (klass) =>
    this.hasClass(klass)
  .pop()

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

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

Usage:

$('.someElement').cycleClasses('a', 'b', 'c')

morgancodes · Answer 3 · 2010-08-12T01:11:11.180

2

Create a "cursor" variable (classNum) which you use to keep track of the position, then let this cursor move through each position in an array containing all of the states you want. Haven't tested this code, but it's the basic idea.

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);
});

The nice thing about programming is you can use it to describe the way you actually think. You used the word "loop", in your original description, so try to create code which describes a repeating sequence, rather than using conditional tests. You'll probably find yourself using "if" less and less the more you progress as a programmer.

edited Aug 12 '10 at 01:11

answered Aug 12 '10 at 01:01

morgancodes

25,055
38
135
187

This works...but only if there's only one `
`, which is *very* unlikely :)

Nick Craver

Aug 12 '10 at 01:05

Good point Nick. Edited. I'd prefer using a closure, feel like there's something dirty about .data. Generally I store local variables in closures instead. But this may be easier to understand. – morgancodes Aug 12 '10 at 01:12

You can save a lot of extra jQuery objects there with [`$.data()`](http://api.jquery.com/jQuery.data/) :) From an overall standpoint though, it doesn't address the ones that already had a class of red then the page loads, the same issue as the `.toggle()` answers :) – Nick Craver Aug 12 '10 at 01:16

Ok, I give up. Seems like our gal has an acceptable solution anyway. What's this $.data() tip though? I sling jquery objects around with reckless abandon. You ever run in to a situation where you run in to problems b/c of too many? – morgancodes Aug 12 '10 at 01:29

score 1 · Answer 4 · answered Aug 12 '10 at 01:00

1

Have you tried Toggle? It should keep the state for you internally.

answered Aug 12 '10 at 01:00

Alexandre Rafalovitch

9,709
1
24
27

toggle would not help for 3 states, would it? – zerkms Aug 12 '10 at 01:02
Recent version allows more than 2 states. The example shows 3: "Bind two or more handlers to the matched elements, to be executed on alternate clicks." – Alexandre Rafalovitch Aug 12 '10 at 01:03
oh, yes... nice catch. "If more than two handlers are provided, .toggle() will cycle among all of them. For example, if there are three handlers, then the first handler will be called on the first click, the fourth click, the seventh click, and so on." – zerkms Aug 12 '10 at 01:04

score 1 · Accepted Answer · answered Aug 12 '10 at 14:01

Ok, this random start position was really annoying me and there were always new jQuery methods I haven't played with much before. So, here is a module cycle solution for N>1 states, including default state with no initial class:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        var list = $("#list");

        //make default state _not_ a special case by adding a class to it
        $("li:not(.green,.red)", list).addClass("default"); 

        //declare cycle transition function
        var cycleClass = function(classFrom, classTo){
            list.delegate("li."+classFrom, "click", function(){
                $(this).toggleClass(classFrom + " " + classTo);
            });
        };

        //declare cycle sequence
        cycleClass("default", "green");
        cycleClass("green", "red");
        cycleClass("red", "default");
    });
</script>
<style type="text/css">
    .default {background-color: lightgray;}
    .green {background-color: green;}
    .red {background-color: red;}
</style>
</head>
<body>
<ul id='list'>
    <li>Start in default</li>
    <li>Another default</li>
    <li class='green'>Start in Green</li>
    <li class='red'>Start in Red</li>
    <li class='green'>Another Green</li>
    <li>Yes another default</li>
</ul>
</body>
</html>

score 0 · Answer 6 · edited May 23 '17 at 10:30

This jQuery function, not a plugin, will cycle through any number of classes that have been set up as a csv of classes in the cycler element's data-classes attribute. Two classes acts just like a toggle. Start with a class not in the list and the initial state is untouched.

Cycle it with $(selector).cycleClass().

I run mine through a server side template engine, hence the {{#objModel}} and {{/objModel}} remove if you don't.

Works on any element that has class and data-* attributes. The code below has a cycle button to change the class of the code block. But it could have just been on the button itself and changed its own class.

I originally posted this to to answer the toggle class topic/question then found this cycle Class topic.

See it in use 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

score 0 · Answer 7 · answered Jan 05 '16 at 08:53

Basic traditional style logic -

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

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

zerkms · Answer 8 · 2010-08-12T01:16:22.200

0

It is exact the sample you need: 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');
});

edited Aug 12 '10 at 01:16

answered Aug 12 '10 at 01:09

zerkms

249,484
69
436
539

The problem with `.toggle()` is that some of his elements have an initial state, so you'd need to start some elements at a non-zero index of the toggle function array, it's best to check inside the method in these cases :) – Nick Craver Aug 12 '10 at 01:18
@Nick Craver: ah, i missed that, +1 to your one then ;-) sorry, Charlotte. – zerkms Aug 12 '10 at 01:23

Keithmgould · Answer 9 · 2010-11-17T22:36:41.577

There is a jQuery plugin that does exactly this called cycleClass...

github: https://github.com/keithmgould/cycleClass

jquery plugin repo: plugins.jquery.com/project/cycleClass

Best,

Keith

PS: here is the documentation:

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

Functionality: if linky has any of the classes listed in the array then all of the classes will be removed, and the class after the farthest class found (modulus) will be added.

Scenarios:

if "foo" found, replace with "bar"
if "jonez" found, replace with "foo"
if "bar" and "jonez" found, replace both with "foo"
if none found, "foo" (first element) added

JQuery click-through class cycle

9 Answers9