判断当前元素是否有某个class,有就不添加,没有就添加当前class
如果是javascript的话,
if (!p.classList.contains('classname')) {
p.className += ' ' + 'classname';
}
更新
p.classList.add('classname');
p.classList能够列出所有class,add方法新增一个类,存在则忽略,不存在则添加。
$("button").click(function(){
if(!$("p:first").hasClass("intro")){
$("p:first").addClass("intro")
}
});
if($('body').hasClass('classname')){
$('body').removeClass('classname')
}else{
$('body').addClass('classname')
}
有classname就移除,没有就添加一个classname
Jquery的ToggleClass方法就可以实习类添加移出
toggleClass
HTML5新增的APIclassList
方法中有contains()判断,以及add()和remove()方法添加和删除类。toggle()
方法则是有则删除无则添加, 如果单纯实现该功能应该是不用jQuery的。
可看张鑫旭这篇博客:HTML5 DOM元素类名相关操作API classList简介
请使用hasClass
if($('div').is('.class')){
$('div').addClass('class');
}
应该是没有才添加,要加个取反
if(! $('div').is('.class')){
$('div').addClass('class');
}
我看你打了jQuery
标签,直接用jQuery
好了,至于判断的事情jQuery
已经帮你做了,自己再判断一次没有任何意义:
jQueryObject.addClass('classname');
Jquery 的话
$("p").toggleClass("red");//就可以实现有就移除。没有就添加
结合上面总结了一下,我想出来的只有这几种:
function addClass0(targetEle, filterClassName){
var target = document.getElementById(targetEle);
var isExist = target && target.className.split('').indexOf(filterClassName)!=-1;
if(!isExist){
target.className = target.className + ' ' + filterClassName;
}
}
function addClass(targetEle, filterClassName){
var target = document.getElementById(targetEle);
if(!target.classList.contains('add')){
target.classList.add('add');
}
}
function addClass1(targetEle, filterClassName){
if(!$(targetEle).is('.'+filterClassName)){
$(targetEle).addClass(filterClassName);
}
}
function addClass2(targetEle, filterClassName){
if(!$(targetEle).hasClass(filterClassName)){
$(targetEle).addClass(filterClassName);
}
}
function addClass3(targetEle, filterClassName){
$(targetEle).not('.'+filterClassName).addClass(filterClassName);
}
function addClass4(targetEle, filterClassName){
$(targetEle+':not(.'+filterClassName+')').addClass(filterClassName);
}
function addClass5(targetEle, filterClassName){
$(targetEle).toggleClass(filterClassName);
}