关于.toggleClass()的实例分享
导读： 如果匹配元素的父级元素有bar样式类名，这个例子将为元素切换 happy 样式类； 否则他将切换 sad 样式类 。 例子: Example: 当点击段落的是有切换 'highlight' 样式类 ...
如果匹配元素的父级元素有bar样式类名，这个例子将为元素切换 happy 样式类； 否则他将切换 sad 样式类 。
例子:
Example: 当点击段落的是有切换 'highlight' 样式类
p {
margin: 4px;
font-size:16px;
font-weight:bolder;
cursor:pointer;
}
.blue {
color:blue;
}
.highlight {
background:yellow;
}
var cls = ['', 'a', 'a b', 'a b c'];
var divs = $('div.wrap').children();
var appendClass = function() {
divs.append(function() {
return '
Click to toggle
highlight
on these
paragraphs
$("p").click(function () { $(this).toggleClass("highlight"); } ); Example: 每当第三次点击段落的时候添加 "highlight" 样式类, 第一次和第二次点击的时候移除 "highlight" 样式类 p { margin: 4px; font-size:16px; font-weight:bolder; cursor:pointer; } .blue { color:blue; } .highlight { background:red; }Click to toggle (clicks: 0)
highlight (clicks: 0)
on these (clicks: 0)
paragraphs (clicks: 0)
var count = 0; $("p").each(function() { var $thisParagraph = $(this); var count = 0; $thisParagraph.click(function() { count++; $thisParagraph.find("span").text('clicks: ' + count); $thisParagraph.toggleClass("highlight", count % 3 == 0); } ); } ); Example: Toggle the class name(s) indicated on the buttons for each div. .wrap > div { float: left; width: 100px; margin: 1em 1em 0 0; padding=left: 3px; border: 1px solid #abc; } div.a { background-color: aqua; } div.b { background-color: burlywood; } div.c { background-color: cornsilk; }' + (this.className || 'none') + '
';
}
);
}
;
appendClass();
$('button').bind('click', function() {
var tc = this.className || undefined;
divs.toggleClass(tc);
appendClass();
}
);
$('a').bind('click', function(event) {
event.preventDefault();
divs.empty().each(function(i) {
this.className = cls[i];
}
);
appendClass();
}
);
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 关于.toggleClass()的实例分享
本文地址： https://pptw.com/jishu/655801.html