jQuery：在3个类之间切换（最初）
我在SO上看过几篇post，但它们在function和结构方面都太具体了，而我正在寻找的东西是我或任何人可以在任何地方使用的更普遍的东西。
我只需要一个按钮，点击它可以在3个类之间循环。 但是如果出现必须循环通过4,5个或更多类的情况，则可以轻松地缩放脚本。
到目前为止，我能够在两个class级之间“循环”，这基本上比骑车更“切换”，所以我有：
HTML：
Toggle classes ... jQuery的：
$('.toggle').click(function () { $('div').toggleClass('class1 class2'); });
这是一个简单的小提琴 。
现在，你会（我，我）认为在方法中添加第三个类会起作用，但它不会：
$('div').toggleClass('class1 class2 class3');
发生的事情是切换开始只发生在class1和class3之间。
所以这就是我最初的问题： 如何让Toggle按钮按顺序循环通过3个类？
然后：如果有人需要循环到4,5或更多课程怎么办？
你可以这样做 ：
$('.toggle').click(function () { var classes = ['class1','class2','class3']; $('div').each(function(){ this.className = classes[($.inArray(this.className, classes)+1)%classes.length]; }); });
示范
这是另一种方法：
if ($(this).hasClass('one')) { $(this).removeClass('one').addClass('two'); } else if ($(this).hasClass('two')) { $(this).removeClass('two').addClass('three'); } else if ($(this).hasClass('three')) { $(this).removeClass('three').addClass('one'); }
var classes = ['class1', 'class2', 'class3'], currentClass = 0; $('.toggle').click(function () { $('div').removeClass(classes[currentClass]); if (currentClass + 1 < classes.length) { currentClass += 1; } else { currentClass = 0; } $('div').addClass(classes[currentClass]); });
这样的东西应该可以正常工作:)
Tinker IO链接 - https://tinker.io/1048b
我将user3353523的答案转换为jQuery插件。
(function() { $.fn.rotateClass = function(cls1, cls2, cls3) { if ($(this).hasClass(cls1)) { return $(this).removeClass(cls1).addClass(cls2); } else if ($(this).hasClass(cls2)) { return $(this).removeClass(cls2).addClass(cls3); } else if ($(this).hasClass(cls3)) { return $(this).removeClass(cls3).addClass(cls1); } else { return $(this).toggleClass(cls1); // Default case. } } })(jQuery); $('#click-me').on('click', function(e) { $(this).rotateClass('cls-1', 'cls-2', 'cls-3'); });
#click-me { width: 5em; height: 5em; line-height: 5em; text-align: center; border: thin solid #777; margin: calc(49vh - 2.4em) auto; cursor: pointer; } .unselectable { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .cls-1 { background: #FFAAAA; } .cls-2 { background: #AAFFAA; } .cls-3 { background: #AAAAFF; }
Click Me!
HTML：
color sample
CSS：
.red { background-color: red; } .yellow { background-color: yellow; } .green { background-color: green; }
JS：
$(document).ready(function() { var colors = ['red', 'yellow', 'green']; var tmp; setInterval(function(){ tmp && $('#example').removeClass(tmp); tmp = colors.pop(); $('#example').addClass(tmp); colors.unshift(tmp); }, 1000); });
DEMO
另一个使用classList replace版本。 尚未得到所有浏览器的支持。
var classes = ["class1", "class2", "class3"]; var index = 0; var classList = document.querySelector("div").classList; const len = classes.length; $('.toggle').click(function() { classList.replace(classes[index++ % len], classes[index % len]); });
.class1 { background: yellow; } .class2 { background: orange; } .class3 { background: red; }
Toggle classes look at me!
这对我有用，我可以尽可能多地堆叠，然后轻松环绕。
switch($('div.sel_object table').attr('class')) { case "A": $('div.sel_object table').toggleClass('A B'); break; case "B": $('div.sel_object table').toggleClass('B C'); break; case "C": $('div.sel_object table').toggleClass('C D'); break; case "D": $('div.sel_object table').toggleClass('D A'); break; }
循环遍历类的索引并从一个切换到另一个。
var classes = ['border-top','border-right','border-bottom','border-left']; var border = 'border-top'; var index = 0; var timer = setInterval( function() { var callback = function(response) { index = ( ++index == 4 ? 0 : index ); $(element).html("text").toggleClass( border + " " + classes[index] ); border = classes[index]; }; }, 1000 );