jQuery |带示例的 toggleClass()

toggleClass() 方法是 jQuery 中的一个内置方法，用于切换或更改附加到所选元素的类。

句法：

$(selector).toggleClass(class, function, switch)

参数：此方法接受上面提到和下面描述的三个参数：

• class：必选参数，用于指定需要替换的类名。
• 函数：它是可选参数，用于指定返回一个或多个类名的函数。该参数包含元素的索引位置和元素的类名。
• switch：它是可选参数，用于指定 true 或 false。默认情况下它是真的。

返回值：此方法返回所选元素以及由 toggleClass() 方法进行的指定更改。

下面的例子说明了 jQuery 中的 toggleClass() 方法：

示例 1：

    
        The toggleclass Method
        
        
          
        
        
            $(document).ready(function() {
                $("button").click(function() {
                    $("div").toggleClass("gfg");
                });
            });
        
        
            .gfg {
                font-size: 25px;
                background-color: yellow;
                min-height:120px;
            }
            div {
                width: 200px;
                min-height: 120px;
                background-color: lightgreen;
                padding: 20px;
                font-weight: bold;
                font-size: 20px;
            }
        
    
    
        
        
            Hello!
            Welcome to GeeksforGeeks.!
            Click Here!
        
    

输出：

示例 2：

    
        toggle class property
        
        
          
        
        
            $(document).ready(function() {
                $("button").click(function() {
                    $("div").toggleClass(function(n) {
                        n = 1;
                        return "item_" + n;
                    });
                });
            });
        
        
            .item_1 {
                color: green;
                font-weight: bold;
                font-size: 20px;
                background-color: white;
                border: 2px solid green;
            }
            div {
                text-align:center;
                width: 200px;
                min-height: 100px;
                background-color: lightgreen;
                padding: 20px;
                border: 2px solid black;
                font-weight: bold;
            }
        
    
    
        
        
            Welcome to GeeksforGeeks!
            Click Here!
        
    

输出：