jQuery在两个以上的类之间切换 [英] jQuery switching between more than two classes

问题描述

我已经在此处发布了有关jQuery切换方法的问题 但是问题是，即使使用迁移插件，它也无法正常工作.

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.

我想编写一个可以在五个类(0-> 1-> 2-> 3-> 4-> 5)之间切换的脚本.

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

这是我使用的JS代码的一部分:

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.

这是我的项目所在的地方: strasbourgmeetings.org/todo

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

推荐答案

问题是，当代码运行时，代码会将的处理程序与这些类的元素挂钩.当您更改元素上的类时，将保留相同的处理程序.

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... */
});

您也可以使用地图:

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

这篇关于jQuery在两个以上的类之间切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！