切换样式.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. shadowssock启动服务

    启动服务:ssserver -c /var/ss/server.json

  2. onethink 重写URL后,apache提示No input file specified

    <IfModule mod_rewrite.c> RewriteEngine on RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{RE ...

  3. 一个纠结的Linux定时任务

    昨天写了一个Linux定时任务,搞了半天才是搞好,现在分享下我犯得错误 首先在Linux根目录下创建一个目录 mkdir cat_crazy 进去创建一个shell脚本test.sh,内容是: #!/ ...

  4. LBP,LBP-TOP的MATLAB公开代码

    http://www.cse.oulu.fi/CMV/Downloads http://www.cse.oulu.fi/wsgi/CMV/Downloads/LBPMatlab

  5. 洛谷——P2952 [USACO09OPEN]牛线Cow Line

    P2952 [USACO09OPEN]牛线Cow Line 题目描述 Farmer John's N cows (conveniently numbered 1..N) are forming a l ...

  6. 洛谷——P1104 生日

    P1104 生日 题目描述 cjf君想调查学校OI组每个同学的生日,并按照从大到小的顺序排序.但cjf君最近作业很多,没有时间,所以请你帮她排序. 输入输出格式 输入格式: 有2行, 第1行为OI组总 ...

  7. 26、Flask实战第26天:cms用户模型定义

    编辑cms.models.py from exts import db from datetime import datetime class CMSUser(db.Model): __tablena ...

  8. Spring的远程调用

    Spring远程支持是由普通(Spring)POJO实现的,这使得开发具有远程访问功能的服务变得相当容易 四种远程调用技术: ◆ 远程方法调用(RMI) ◆ Caucho的Hessian和Burlap ...

  9. css-移动&缩放元素

    transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜. 用法:object.style.transform="rotate(7deg)&q ...

  10. Thupc2017"礼"?

    题面 先粘上gouzhi的题面,听说是thupc的题 [问题背景] 情人节要到了,zhx 要给女朋友买礼物. [问题描述] 橱窗里摆放了 n 种不同的玩偶,购买第 i 种玩偶需要价格 a[i],价值为 ...