0

我已经在这里发布了一个关于 jQuery 切换方法 的问题但问题是即使使用 migrate 插件它也不起作用。

我想编写一个在五个类（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

4

3 回答 3

2

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

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

$('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');
    }
});
于 2013-07-28T15:50:46.920 回答
1

[编辑：工作演示]

假设您在初始化阶段已经将“优先级”作为元素上的默认类，这将循环遍历其他类：

$('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]);
    });
于 2013-07-28T16:04:00.073 回答
1

我已经尝试在 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.
于 2013-12-28T18:22:29.997 回答