切换样式.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. Web测试中容易被忽略的Charset问题

    今天继续进行一个更综合的脚本制作,录制设置.进行录制.脚本修改,一切都轻车熟路,进行得很顺利.经过近一个小时的对比和修改,OK,脚本大功告成,终于可以小试牛刀了,嘿嘿.    运行,replay lo ...

  2. php打开错误日志

    ini_set("display_errors", "On"); error_reporting(E_ALL | E_STRICT);

  3. "The /usr/local directory is not writable."解决方法

    sudo chown -R $(whoami) /usr/local brew prune

  4. HDU 6464.免费送气球-动态开点-权值线段树(序列中第first小至第second小的数值之和)(感觉就是只有一个状态的主席树) (“字节跳动-文远知行杯”广东工业大学第十四届程序设计竞赛)

    免费送气球 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Submi ...

  5. 洛谷——P1292 倒酒

    P1292 倒酒 题目描述 Winy是一家酒吧的老板,他的酒吧提供两种体积的啤酒,a ml和b ml,分别使用容积为a ml和b ml的酒杯来装载. 酒吧的生意并不好.Winy发现酒鬼们都非常穷.有时 ...

  6. linux——(1)初识linux

    linux有窗口管理员环境和纯文本界面环境,同时linux默认提供6个Terminal来让用户登录.crtl+alt+F1-6可自由切换.其中如果窗口管理员环境处于运行状态,那么可以按crtl+alt ...

  7. 【分块】MIPT-2016 Pre-Finals Workshop, Taiwan NTU Contest, Sunday, March 27, 2016 Problem A. As Easy As Possible

    给你一个字符串,多次区间询问,问你在该区间内最多能有几个easy重复的子序列. 显然如果只有一次询问,从左到右贪心做即可. 分块,预处理任意两块间的答案,不过要把以e a s y开头的四个答案都处理出 ...

  8. 【rope】bzoj1269 [AHOI2006]文本编辑器editor

    维护一个字符串,支持以下操作:   主要就是 成段插入.成段删除.成段翻转.前两个操作很好通过rope实现.第三个操作也不难,维护两个rope,一个正向,一个反向,翻转时swap一下就行了.   ro ...

  9. 1.2(JavaScript学习笔记)JavaScript HTML DOM

    一.DOM DOM全称为document object model(文档对象模型). 此处的文档指当前HTML文档,对象指HTML标签. 当网页被加载时,浏览器会创建页面的文档对象模型. 下面结合具体 ...

  10. Problem F: 尖兵

    #include<stdio.h> struct man{ ]; int grade; }; int main(void) { int t; int i,j,n; ],max; scanf ...