Question

我已经发布了一个关于jQuery切换方法的问题here 但问题是即使使用迁移插件也无法正常工作。

我想编写一个可在五个类之间切换的脚本（0 - ＆gt; 1 - ＆gt; 2 - ＆gt; 3 - ＆gt; 4 - ＆gt; 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

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

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

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

Answer 2

[编辑：working demo]

假设您在初始化阶段已将'priority'作为元素上的默认类，这将循环通过其他类：

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

Answer 3

我已经尝试过在toggleClass（）的帮助下完成这项工作并且没有成功。尝试使用我的方法声明一个包含五个类的数组并动态切换他们。适应你自己的名字。

//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.

jQuery在两个以上的类之间切换

3 个答案: