javascript - jQuery 在两个以上类之间切换

Question

我已经发布了有关 jQuery 切换方法的问题 here 但问题是，即使使用迁移插件，它也不起作用。

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

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

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

这不是代码的第一个版本 - 我已经尝试过其他一些东西，例如:

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

但这次它只在第一个和最后一个元素之间切换。

这是我的项目所在的位置:strasbourgmeetings.org/todo

Answer 1

问题是，当您的代码运行时，您的代码会将处理程序与这些类的元素 Hook 。。当您更改元素上的类时，相同的处理程序仍保持附加状态。

您可以使用单个处理程序，然后在单击发生时检查该元素具有哪个类:

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

您也可以使用 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');
    }
});