jQuery switching between more than two classes

问题

I've already posted a question about jQuery toggle method here But the problem is that even with the migrate plugin it does not work.

I want to write a script that will switch between five classes (0 -> 1 -> 2 -> 3 -> 4 -> 5).

Here is the part of the JS code I use:

$('div.priority#priority'+id).on('click', function() {
        $(this).removeClass('priority').addClass('priority-low');
    });
    $('div.priority-low#priority'+id).on('click' ,function() {
        $(this).removeClass('priority-low').addClass('priority-medium');
    });
    $('div.priority-medium#priority'+id).on('click', function() {
        $(this).removeClass('priority-medium').addClass('priority-normal');
    });
    $('div.priority-normal#priority'+id).on('click', function() {
        $(this).removeClass('priority-normal').addClass('priority-high');
    });
    $('div.priority-high'+id).on('click', function() {
        $(this).removeClass('priority-high').addClass('priority-emergency');
    });
    $('div.priority-emergency'+id).on('click', function() {
        $(this).removeClass('priority-emergency').addClass('priority-low');
    });

This is not the first version of the code - I already tried some other things, like:

    $('div.priority#priority'+id).toggle(function() {
     $(this).attr('class', 'priority-low');
}, function() {
     $(this).attr('class', 'priority-medium');
}, function() {
     ...)

But this time it only toggles between the first one and the last one elements.

This is where my project is: strasbourgmeetings.org/todo

回答1:

The thing is that your code will hook your handlers to the elements with those classes when your code runs. The same handlers remain attached when you change the classes on the elements.

You can use a single handler and then check which class the element has when the click occurs:

$('div#priority'+id).on('click', function() {
    var $this = $(this);
    if ($this.hasClass('priority')) {
        $this.removeClass('priority').addClass('priority-low');
    }
    else if (this.hasClass('priority-low')) {
        $this.removeClass('priority-low').addClass('priority-medium');
    }
    else /* ...and so on... */
});

You can also do it with a map:

var nextPriorities = {
    "priority":           "priority-low",
    "priority-low":       "priority-medium",
    //...and so on...
    "priority-emergency": "priority"
};
$('div#priority'+id).on('click', function() {
    var $this = $(this),
        match = /\bpriority(?:-\w+)?\b/.exec(this.className),
        current = match && match[0],
        next = nextPriorities[current];
    if (current) {
        $this.removeClass(current).addClass(next || 'priority');
    }
});

回答2:

[edit: working demo]

Assuming you have 'priority' as the default class already on the element at the initialization phase, this will cycle through the others:

$('div#priority' + id)
    .data('classes.cycle', [
        'priority',
        'priority-low',
        'priority-medium',
        'priority-normal',
        'priority-high',
        'priority-emergency'
    ])
    .data('classes.current', 0)
    .on('click', function () {
        var $this = $(this),
            cycle = $this.data('classes.cycle'),
            current = $this.data('classes.current');

        $this
            .removeClass(cycle[current % cycle.length])
            .data('classes.current', ++current)
            .addClass(cycle[current % cycle.length]);
    });

回答3:

I have tried myself to do this with the sole help of toggleClass() and didn't succeeded. Try my method that declares an array with your five classes and toggles dynamically through them.Do adapt to your own names.

//variable for the classes array
var classes=["one","two","three","four","five"];
//add a counter data to your divs to have a counter for the array
$('div#priority').data("counter",0);
$(document).on('click','div#priority',function(){
    var $this=$(this);
    //the current counter that is stored
    var count=$this.data("counter");
    //remove the previous class if is there
    if(($this).hasClass(classes[count-1])){
        $(this).removeClass(classes[count-1]));
    }

    //check if we've reached the end of the array so to restart from the first class.
    //Note:remove the comment on return statement if you want to see the default class applied.
    if(count===classes.length){
        $this.data("counter",0);
        //return;//with return the next line is out of reach so class[0] wont be added
    }
    $(this).addClass(classes[count++]);
    //udpate the counter data
    $this.data("counter",count);
});
//If you use toggleClass() instead of addClass() you will toggle off your other classes.Hope is a good answer.

来源：https://stackoverflow.com/questions/17909879/jquery-switching-between-more-than-two-classes