切换样式.toggleClass()

在做某些效果的时候,可能会针对同一节点的某一个样式不断的切换,也就是addClass与removeClass的互斥切换,比如隔行换色效果

jQuery提供一个toggleClass方法用于简化这种互斥的逻辑,通过toggleClass方法动态添加删除Class,一次执行相当于addClass,再次执行相当于removeClass

.toggleClass( )方法:在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即:如果存在(不存在)就删除(添加)一个类

  1. .toggleClass( className ):在匹配的元素集合中的每个元素上用来切换的一个或多个(用空格隔开)样式类名
  2. .toggleClass( className, switch ):一个布尔值,用于判断样式是否应该被添加或移除
  3. .toggleClass( [switch ] ):一个用来判断样式类添加还是移除的 布尔值
  4. .toggleClass( function(index, class, switch) [, switch ] ):用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数

注意事项:

  1. toggleClass是一个互斥的逻辑,也就是通过判断对应的元素上是否存在指定的Class名,如果有就删除,如果没有就增加
  2. toggleClass会保留原有的Class名后新增,通过空格隔开

切换样式.toggleClass()的更多相关文章

  1. 利用JavaScript来切换样式表

    切换样式表 html页 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  2. angular ng-repeat点击切换样式,浅谈track by $index

    前言 angular ng-repeat点击切换样式,ng-repeat点击切换class样式,巧用ng-repeat track by $index. 1.问题 一个ul包含多个li,li通过ng- ...

  3. WPF两个按钮来回切换样式

    <!-- 两个按钮来回切换样式 --> <Style x:Key="SwicthFunctionMetroToggleButton" TargetType=&qu ...

  4. vue切换样式

    在vue中使用事件来切换绑定的class样式,在vue-cli脚手架中的Home.vue中 <template> <div id="main"> <l ...

  5. 中高级前端应该必会,js实现事件委托代理、切换样式、元素获取相对于文档位置等

    1.介绍 随着组件开发大流行,现在三大框架已经基本占领了整个前端. 这时候,我们要是引入一个 jq 是不是先得你的项目非常臃肿,jq 也很不适合. 这个时候,你就需要来增加你 js 的功底. 2.各种 ...

  6. vue点击切换样式,点击切换地址栏,点击显示或者隐藏

    1. vue点击显示切换 :class='{"span":index==0}' class原本是 类选择器 加上 :class就是绑定属性的意思 '{"span" ...

  7. Silverlight button 图片切换样式

    之前一直做WPF现在开始接触Slilverlight感触很多. 今天做一个Button要求 有两个图片,button默认有一个图片,鼠标over时用另一个图片, 用wpf做的时候写一个template ...

  8. 使用vue实现tab栏的点击切换样式

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  9. css根据屏幕大小切换样式

    首先html head之间加入: <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, ma ...

随机推荐

  1. ELK系列--logstash无法启动

    1.logstash无法启动,提示bind address   原因:   1)配置目录下存在多个配置文件,而logstash会加载所有conf格式的文件   解决方案:删除不必要的,保留一个conf ...

  2. HDU 5820 Lights (2016多校7L,主席树)

    题意  给定n个平面上的点,坐标范围为[1, 50000].如果对于任意两个点,都可以通过直走(中途经过其他点)走到. 那么输出YES,否则输出NO. 首先排序,去重. 我们要找的点对是只能斜对角走到 ...

  3. 洛谷P2587 [ZJOI2008] 泡泡堂

    题目传送门 分析:一道策略游戏题,要求最大期望得分和最小期望得分.首先分析最大,很显然是可以用一种类似于田忌赛马的思维来做,将两队的实力按照从大到小(其实从小到大也可以)排序,然后就按照顺序比较,可能 ...

  4. msysgit: Unicode font warning

    Warning:your console font probably does not support unicode , if you experience  strange characters ...

  5. go chapter 1

    case 1 // helloworld.go package main import "fmt" func main() { fmt.Println("Hello, 世 ...

  6. 编译 Windows 版本的 Unity Mono(2017-03-12 20:59)

    上一篇说了如何编译 Android 下的 mono,这里简要说下编译 windows 版本的 mono,就是 mono.dll,Unity 版本只有一个 mono.dll,官方的 mono,好几个可执 ...

  7. HDU 5669 Road(线段树建树)(分层图最短路)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5669 [分析]线段树建树+分层图最短路 #include <cstdio> #includ ...

  8. 【vim】mac配置vim,molokai配色

    效果如下: 首先修改主目录下的.vimrc: "======================================================================= ...

  9. Spring的消息 Java Message Service (JMS)

     Spring有两种方法提供对EJB的支持: Spring能让你在Spring的配置文件里,把EJB作为Bean来声明.这样,把EJB引用置入到其他Bean的属性里就成为可能了,好像EJB就是另一个P ...

  10. 【POJ 3784】 Running Median (对顶堆)

    Running Median Description For this problem, you will write a program that reads in a sequence of 32 ...