jQuery UI | 切换类方法

在 jQuery UI 中，我们可以使用一系列方法来管理 DOM 元素的类，其中包括切换类的方法。切换类方法能够在指定元素上添加或者删除一个或多个类，如果元素当前已包含指定的类，则会自动删除这个类。切换类方法可以让我们非常方便地控制元素的样式，既能够实现动态的效果，又可以精简代码。

添加和删除类

在 jQuery UI 中，我们可以使用 .toggleClass() 方法来切换类。.toggleClass() 方法接受一个或多个类名作为参数，并在指定的元素上切换这些类。如果元素已经包含这些类之一，则这个类会被删除；否则这个类会被添加。

$( "#myelement" ).toggleClass( "myclass" );

上面的代码将在 #myelement 元素上切换 myclass 类。

我们也可以传入一个布尔值（如 true 或 false）作为第二个参数，来强制添加或删除一个类。

$( "#myelement" ).toggleClass( "myclass", true );

上面的代码将强制在 #myelement 元素上添加 myclass 类。

切换多个类

我们可以在 .toggleClass() 方法中传入多个类名，以空格分隔，从而在元素上切换多个类。

$( "#myelement" ).toggleClass( "myclass1 myclass2 myclass3" );

上面的代码将在 #myelement 元素上切换 myclass1、myclass2 和 myclass3 三个类。

条件切换

我们还可以通过传入一个函数来让 .toggleClass() 方法根据条件切换类。传入的函数应该返回一个布尔值，如果为 true 则添加类，如果为 false 则删除类。

$( "#myelement" ).toggleClass( "myclass1 myclass2", function() {
  return $( "#myelement" ).width() > 100;
});

上面的代码将根据 #myelement 元素的宽度是否大于 100px 来切换 myclass1 和 myclass2 类。

总结

切换类方法是 jQuery UI 中常用的 DOM 类操作方法，可以帮助我们快速、方便地控制元素的样式。该方法既适用于单个类的添加和删除，也适用于多个类的切换。我们还可以使用条件切换来实现更加动态的效果。