如果我有类a和类。b,并想在按钮点击之间切换,什么是一个很好的解决方案在jQuery?我仍然不明白toggleClass()是如何工作的。
是否有内联解决方案,把它放在onclick=""事件?
如果我有类a和类。b,并想在按钮点击之间切换,什么是一个很好的解决方案在jQuery?我仍然不明白toggleClass()是如何工作的。
是否有内联解决方案,把它放在onclick=""事件?
如果你的元素从一开始就公开类A,你可以这样写:
$(element).toggleClass("A B");
这将删除类A并添加类B。如果您再次这样做,它将删除类B并恢复类A。
如果你想匹配公开任意一个类的元素,你可以使用一个多类选择器并写:
$(".A, .B").toggleClass("A B");
以下是一个简化版本:(虽然不优雅,但易于理解)
$("#yourButton").toggle(function()
{
$('#target').removeClass("a").addClass("b"); //Adds 'a', removes 'b'
}, function() {
$('#target').removeClass("b").addClass("a"); //Adds 'b', removes 'a'
});
另外,还有一个类似的解决方案:
$('#yourbutton').click(function()
{
$('#target').toggleClass('a b'); //Adds 'a', removes 'b' and vice versa
});
我已经做了一个jQuery插件工作DRY:
$.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
这是另一种“非传统”的方式。
它意味着使用下划线或虚线。 它假设一个上下文,其中您: 元素没有init类(这意味着你不能使用toggleClass('a b')) 你必须从某个地方动态地获取类
这种场景的一个例子可以是按钮,其中包含要在另一个元素上切换的类(例如容器中的制表符)。
// 1: define the array of switching classes:
var types = ['web','email'];
// 2: get the active class:
var type = $(mybutton).prop('class');
// 3: switch the class with the other on (say..) the container. You can guess the other by using _.without() on the array:
$mycontainer.removeClass(_.without(types, type)[0]).addClass(type);
你的onClick请求:
<span class="A" onclick="var state = this.className.indexOf('A') > -1; $(this).toggleClass('A', !state).toggleClass('B', state);">Click Me</span>
试试吧:https://jsfiddle.net/v15q6b5y/
只是 JS à la jQuery:
$('.selector').toggleClass('A', !state).toggleClass('B', state);
最简单的解决方案是分别toggleClass()两个类。
假设你有一个图标:
<i id="target" class="fa fa-angle-down"></i>
要在fa-角-下和fa-角-上之间切换,请执行以下操作:
$('.sometrigger').click(function(){
$('#target').toggleClass('fa-angle-down');
$('#target').toggleClass('fa-angle-up');
});
因为我们一开始是向下的角度,而不是向上的角度每次你切换这两个角度时,一个会离开,另一个会出现。