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

我已经在这里发布了一个关于jQuery toggle方法的问题但是问题是即使使用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

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

[编辑： 工作演示 ]

假设您在初始化阶段已经将’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.