前端元素的动态操作中,我们可以对一个元素添加一个类,也可以删除一个类。那如果我们对指定的元素中的某个类在添加和删除之间来回切换呢?这篇文章就说一说,元素中某个类在添加和删除之间的切换效果,也就是JQ中的切换事件。

JQ中的toggleClass()方法定义与用法

toggleClass():此方法对设置或移除被选元素的一个或多个类进行切换。

注意:该方法检查每个元素中指定的类。如果不存在则添加类,如果已设置则删除之。这就是所谓的切换效果

语法

$(selector).toggleClass(class,switch)

例:JQ改变字体的颜色

代码

<style>
    .c{
        color:red;
    }
    #mochu{
        margin: 10px 0;
    }
</style>
<div id="mochu">
    飞鸟慕鱼博客
</div>
<button>点我测试</button>
<script>
    $('button').click(function(){
        $('#mochu').toggleClass('c');
    });
</script>

运行结果如下图,字体会在两种颜色之间进行切换:

JQ切换字体颜色    Q切换字体颜色

例:JQ显示和隐藏某个元素

还是上面的代码,我们只改成一个类C的属性

代码

<style>
    .c{
        display: none;
    }
    #mochu{
        margin: 10px 0;
    }
</style>
<div id="mochu">
    飞鸟慕鱼博客
</div>
<button>点我测试</button>
<script>
    $('button').click(function(){
        $('#mochu').toggleClass('c');
    });
</script>

运行结果如下图:

JQ隐藏显示切换    jq类的切换事件,toggleClass()方法,JQ添加一个类,JQ删除一个类,JQ隐藏显示切换,JQ切换字体颜色

注意:请比较以上两张图中箭头所指的方向,每次点击按钮,元素中的类都在添加和删除两事件中切换。

JQ利用判断来添加和删除类

如果上面的例子,不能完全的了解toggleClass()方法,那么下面的示例可以从另一方面来实现类的添加和删除

<style>
    .c{
        display: none;
    }
    #mochu{
        margin: 10px 0;
    }
</style>
<div id="mochu">
    飞鸟慕鱼博客
</div>
<button>点我测试</button>
<script>
    $('button').click(function(){
        // $('#mochu').toggleClass('c');
        // 以下代码和上面被注释掉的代码等价
        if($('#mochu').hasClass('c')){
            $('#mochu').removeClass('c');
        }else{
            $('#mochu').addClass('c');
        }
    });
</script>

我们可以使用hasClass方法判断是否具有类C,如果有就删除,如果没有就添加。

removeClass()
//删除一个类
addClass()
//添加一个类