在jQuery中切换两个类的最简单方法
在jQuery中切换两个类的最简单方法
提问于 2011-08-10 03:47:14
如果我有.A类和.B类，并且想在单击按钮时切换，那么在jQuery中有什么好的解决方案呢？我仍然不明白toggleClass()是如何工作的。
有没有内联解决方案可以把它放在onclick=""事件中？
回答 3
Stack Overflow用户
回答已采纳
发布于 2011-08-10 03:48:52
如果你的元素从一开始就公开了类A，你可以这样写：
$(element).toggleClass("A B");这将删除类A并添加类B。如果您再次这样做，它将删除类B并恢复类A。
如果想要匹配公开这两个类的元素，可以使用multiple class selector并编写：
$(".A, .B").toggleClass("A B");Stack Overflow用户
发布于 2015-09-22 07:01:31
我已经做了一个jQuery插件，用于干式工作：
$.fn.toggle2classes = function(class1, class2){
if( !class1 || !class2 )
return this;
return this.each(function(){
var $elm = $(this);
if( $elm.hasClass(class1) || $elm.hasClass(class2) )
$elm.toggleClass(class1 +' '+ class2);
else
$elm.addClass(class1);
});
};
// usage example:
$(document.body).on('click', () => {
$(document.body).toggle2classes('a', 'b')
})body{ height: 100vh }
.a{ background: salmon }
.b{ background: lightgreen }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
Click anywhere
Stack Overflow用户
发布于 2018-03-16 15:53:20
最简单的解决方案是分别对这两个类执行toggleClass()。
假设你有一个图标：
<i id="target" class="fa fa-angle-down"></i>要在fa-angle-down和fa-angle-up之间切换，请执行以下操作：
$('.sometrigger').click(function(){
$('#target').toggleClass('fa-angle-down');
$('#target').toggleClass('fa-angle-up');
});因为我们在开始时有fa-angle-down而没有fa-angle-up，所以每次切换这两个时，一个离开，另一个出现。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7002039
复制相关文章
相似问题