jQuery.toggleClass() 函数详解
toggleClass()函数用于切换当前jQuery对象所匹配的每一个元素上指定的css类名。所谓&切换&，就是如果该元素上已存在指定的类名，则移除掉；如果不存在，则添加该类名。该函数属于jQuery对象(实例)。语法toggleClass()函数的用法比较复杂，其主要有以下两种用法：用法一：// 参数类型( string )是 v 1.0的用法
// 参数类型( string, boolean )是 v 1.3新增用法
// 参数类型( function [, boolean] )是 v 1.4 新增用法
jQueryObject.toggleClass( classNames [, switch ] )切换指定的css类名classNames。如果存在指定的类名，则移除该类名；如果存在，则添加该类名。参数switch用于指定是只添加还是只移除指定的css类名。用法二：jQuery 1.4 新增该用法。jQueryObject.toggleClass( [ switch ] )只要该元素有css类名，或者switch参数为false，toggleClass()将移除该元素所有的css类名。否则(其他任何情况)，都会将元素的class属性重置为最近一次调用toggleClass()函数(必须是该用法)时的有效class属性值(&有效&意即不为空)。如果没有有效的class属性值，则重置class属性为空字符串。注意：toggleClass()会&切换&当前jQuery对象所匹配的每一个元素上指定的css类名。参数参数描述classNamesString/Function类型指定的css类名，字符串可以通过空格分隔的方式来添加多个css类名。或者为返回css类名的函数。switchBoolean类型一个布尔值，用于指定是添加还是移除css类名。true表示添加，false表示移除。jQuery 1.4 新增支持：参数className可以为函数。toggleClass()将根据匹配的所有元素遍历执行该函数，函数中的this将指向对应的DOM元素。toggleClass()还会为函数传入3个参数：第一个参数就是该元素在匹配元素中的索引，第二个参数就是该元素节点当前的class属性值，第三个参数就是调用toggleClass()时传入的switch参数。函数的返回值就是该元素需要切换的css类名(也可以通过空格分隔表示多个css类名)。如果返回值为空白字符串或者undefined，toggleClass()将不会为当前元素切换任何css类名。返回值toggleClass()函数的返回值是jQuery类型，返回当前jQuery对象本身。示例&说明以下是toggleClass()函数应用时的部分等价代码，你可以参考理解。$element.toggleClass( className );
if( $element.hasClass( className ) ){
$element.removeClass( className );
$element.addClass( className );
//上面的className均表示单个css类名，如果是空格分隔的多个css类名，则等价部分的代码是需要循环执行的
/* ********** 分割线 ********** */
$element.toggleClass( className, true );
$element.addClass( className );
/* ********** 分割线 ********** */
$element.toggleClass( className, false );
$element.removeClass( className );以下面这段HTML代码为例：&div id=&n1&&
&p id=&n2& class=&demo test&&CodePlayer&/p&
&p id=&n3& class=&foo&&专注于编程开发技术分享&/p&
&/div&我们编写如下jQuery代码：// 以下注释中的&当前&均表示在该函数执行之前
var $n2 = $(&#n2&);
// 切换n2上的一个css类名(当前有&demo&，切换后无&demo&)
$n2.toggleClass(&demo&);
document.writeln( $n2.attr(&class&) ); // test
//切换n2上的2个css类名(当前无&demo&有&test&，切换后则有&demo&无&test&)
$n2.toggleClass(&demo test&);
document.writeln( $n2.attr(&class&) ); // demo
var $n3 = $(&#n3&);
// 为n3添加2个css类名(类名&foo&已存在，不会重复添加)
// 相当于 $n3.addClass(&foo bar&);
$n3.toggleClass(&foo bar&, true);
document.writeln( $n3.attr(&class&) ); // foo bar
// 移除所有的css类名(当前的class属性值为&foo bar&，有css类名，内部会先存档再移除)
$n3.toggleClass(false);
document.writeln( $n3.attr(&class&) ); // (空字符串)
// 恢复为上一次保存的class属性值(当前的class属性值为&&，没有css类名，内部不会保存)
// 此时switch不为false，并且元素没有css类名，因此会恢复为之前保存的class属性值(&foo bar&)
$n3.toggleClass(true);
document.writeln( $n3.attr(&class&) ); // foo bar
// 移除n3上的一个css类名
// 相当于 $n3.removeClass(&bar&);
$n3.toggleClass(&bar&, false);
document.writeln( $n3.attr(&class&) ); // foo
// 移除所有的css类名(当前的class属性值为&foo&，有css类名，内部会先存档再移除)
// 由于当前有css类名，因此无论参数是true还是false，都会移除全部的css类名
$n3.toggleClass(true);
document.writeln( $n3.attr(&class&) ); // (空字符串)
// 恢复为上次保存的class属性值(当前的class属性值为&&，没有css类名，内部不会保存)
//此时switch不为false，并且元素没有css类名，因此会恢复为之前保存的class属性值(&foo&)
$n3.toggleClass(true);
document.writeln( $n3.attr(&class&) ); // foo
// 当前有css类名，移除所有的css类名(当前的class属性值为&foo&，有css类名，内部会先存档再移除)
// 相当于 $n3.toggleClass(true);
$n3.toggleClass();
document.writeln( $n3.attr(&class&) ); // (空字符串)
// 当前无css类名，恢复为上次保存的class属性值(当前的class属性值为&&，没有css类名，内部不会保存)
//此时switch不为false，并且元素没有css类名，因此会恢复为之前保存的class属性值(&foo&)
$n3.toggleClass();
document.writeln( $n3.attr(&class&) ); // foo
// 切换、强制添加操作针对print-index和printed两个类名
// 移除只针对print-index (index表示当前元素在匹配元素中的索引)
function callback(index, classNames, _switch){
// 函数内部的this指向迭代的当前DOM元素
if( _switch === false){
return &print-& +
}else{ // true 或 undefined
return &print-& + index + & printed&;
// 这里的true，就是传递给函数callback的第三个参数_switch的值
$(&p&).toggleClass( callback, true);
我们认为：
用户的主要目的，是为了获取有用的信息，而不是来点击广告的。因此本站将竭力做好内容，并将广告和内容进行分离，确保所有广告不会影响到用户的正常阅读体验。用户仅凭个人意愿和兴趣爱好点击广告。
我们坚信：只有给用户带来价值，用户才会给我们以回报。
CodePlayer技术交流群1：
帮朋友打一个硬广告：
P2P网贷系统(Java版本) 新年低价大促销，多年P2P技术积累，系统功能完善（可支持资金存管），架构稳定灵活、性能优异、二次开发快速简单。
另可提供二次开发、安装部署、售后维护、安全培训等一条龙服务。
外行看热闹，内行看门道。可以自信地认为，在系统设计上，比市面上的晓风、迪蒙、方维、绿麻雀、国融信、金和盛等P2P系统要好。
深圳地区支持自带技术人员现场考察源代码、了解主要技术架构，货比三家，再决定是否购买。
也可推荐他人购买，一旦完全成交，推荐人可获得实际售价 20% 的返现。
有意向者，详情请
联系，工作时间立即回复。
打开导航菜单jQuery 属性操作 - toggleClass() 方法
jQuery 属性操作 - toggleClass() 方法
对设置和移除所有 &p& 元素的 &main& 类进行切换：
$(&button&).click(function(){
$(&p&).toggleClass(&main&);
定义和用法
toggleClass() 对设置或移除被选元素的一个或多个类进行切换。
该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。
不过，通过使用 &switch& 参数，您能够规定只删除或只添加类。
$(selector).toggleClass(class,switch)
必需。规定添加或移除 class 的指定元素。
如需规定若干 class，请使用空格来分隔类名。
可选。布尔值。规定是否添加或移除 class。
使用函数来切换类
$(selector).toggleClass(function(index,class),switch)
function(index,class)
必需。规定返回需要添加或删除的一个或多个类名的函数。
index - 可选。接受选择器的 index 位置。
class - 可选。接受选择器的当前的类。
可选。布尔值。规定是否添加(true)或移除(false)类。后使用快捷导航没有帐号？
只需一步，快速开始
查看: 2314|回复: 3
再次请教懂jquery的朋友，能否实现toggleattr的效果，就是类似toggleClass那样
UID566653在线时间 小时积分31帖子离线17323 天注册时间
新手上路, 积分 31, 距离下一级还需 19 积分
好像默认jquery没有toggleattr这个功能。就是如果存在（不存在）就删除（添加）一个。
UID544819在线时间 小时积分1683帖子离线17323 天注册时间
银牌会员, 积分 1683, 距离下一级还需 1317 积分
额、没有这样的吧、想法很好、那就多写两行代码解决吧
UID539529在线时间 小时积分807帖子离线17323 天注册时间
高级会员, 积分 807, 距离下一级还需 193 积分
看来你只能自己弄了
UID566653在线时间 小时积分31帖子离线17323 天注册时间
新手上路, 积分 31, 距离下一级还需 19 积分
jquery有什么方法能判断某个标记是否有某个属性么。比如有很多image标记，src各不一样，我想选中一些src一样的元素。
Powered by