jQuery UI | 切换类方法

jQuery UI是一个强大的基于jQuery的用户界面库，其中包含了大量的可重复利用的UI组件和工具。其中切换类方法是jQuery UI中的一种灵活的方法，可以轻松地给页面中的元素添加或移除类。

添加类

使用addClass()方法可以为元素添加一个或多个类。

$( "div" ).addClass( "class1 class2" );

移除类

使用removeClass()方法可以从一个或多个元素中删除类。

$( "div" ).removeClass( "class1 class2" );

切换类

使用toggleClass()方法可以切换一个或多个元素中包含的类。如果元素已经拥有了类，则toggleClass()方法会将其删除。如果元素没有类，则该方法将其添加。

$( "div" ).toggleClass( "class1 class2" );

如果需要添加方法，则可以先使用hasClass()方法检查元素是否具有该类，然后使用addClass()方法添加类。

if ( $( "div" ).hasClass( "class1" ) ) {
  $( "div" ).addClass( "class2" );
}

切换回调函数

toggleClass()方法也可以接收一个回调函数作为其第二个参数。该函数在每次切换时都会被调用，从而提供更细粒度的控制。

$( "div" ).toggleClass( "class1 class2", function() {
  if ( $( this ).hasClass( "class1" ) ) {
    console.log( "Class1 added" );
  } else {
    console.log( "Class1 removed" );
  }
});

总结

通过addClass()、removeClass()和toggleClass()方法，可以轻松地为元素添加、删除或切换类。切换类方法还可以接受回调函数，提供更细粒度的控制。在使用jQuery UI时，切换类方法是非常有用的工具，可以帮助您快速修改并控制页面中的元素。