前端元素的動態操作中,我們可以對一個元素添加一個類,也可以刪除一個類。那如果我們對指定的元素中的某個類在添加和刪除之間來回切換呢?這篇文章就說一說,元素中某個類在添加和刪除之間的切換效果,也就是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切換字體顏色

国产视频app注意:請比較以上兩張圖中箭頭所指的方向,每次點擊按鈕,元素中的類都在添加和刪除兩事件中切換。

JQ利用判斷來添加和刪除類

国产视频app如果上面的例子,不能完全的了解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()
//添加一個類