jQuery toggleClass

jQuery toggleClass

一、jQuery 中 toggleClass方法的理解

1、用于切换当前jQuery对象所匹配的每一个元素上指定的css类名。

2、所谓"切换",就是如果该元素上已存在指定的类名,则移除掉;如果不存在,则添加该类名。

二、toggleClass语法

1、类的切换

$(selector).toggleClass(class,switch)

参数说明

class

(1)、必需。规定添加或移除 class 的指定的css类名。

(2)、如需规定若干 class,请使用空格来分隔类名。

switch

(1)、可选。布尔值。

(2)、用于指定是只添加(true)还是只移除(false)指定的css类名。

2、使用函数来切换类

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

参数说明

function(index,class)

(1)、必需。规定返回需要添加或删除的一个或多个类名的函数。

(2)、index - 可选。接受选择器的 index 位置。

(3)、class - 可选。接受选择器的当前的类。

switch

可选。布尔值。规定是否添加(true)或移除(false)类。

三、toggleClass 与 js 的等价代码

  •  
  • 
    $element.toggleClass( className );
    // 相当于
    if( $element.hasClass( className ) ){
        $element.removeClass( className );
    }else{
        $element.addClass( className ); 
    }
    //上面的className均表示单个css类名,如果是空格分隔的多个css类名,则等价部分的代码是需要循环执行的
    
    /* ********** 分割线 ********** */
    
    $element.toggleClass( className, true );
    //相当于
    $element.addClass( className ); 
    
    /* ********** 分割线 ********** */
    
    $element.toggleClass( className, false );
    //相当于
    $element.removeClass( className );
    
    		
  • 四、toggleClass实例

    1、对添加和移除类进行切换

  • 
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("p").toggleClass("main");
      });
    });
    </script>
    <style>
    .main
    {
    font-size:120%;
    color:red;
    }
    </style>
    
    
    <p>This is a paragraph.</p>
    <p class="main">This is another paragraph.</p>
    
    <button>Toggle class "main" for p elements</button>
    
    		
  • 2、使用函数切换类

  •  
  • HTML 代码   复制
  • 
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("li").toggleClass(function(n){
          return "listitem_" + n;
        });
      });
    });
    </script>
    <style>
    .listitem_1, .listitem_3
    {
    color:red;
    }
    .listitem_0, .listitem_2
    {
    color:blue;
    }
    </style>
    
    
    <h1>This is a heading</h1>
    <ul>
    <li>Peter</li>
    <li>Lois</li>
    <li>Chris</li>
    <li>Stewie</li>
    </ul>
    
    <button>Add/remove classes to list items</button>
    
    				
  • 
    
    

    3、使用 switch 参数

  •  
  • HTML 代码   复制
  • 
    <script>
    $(document).ready(function(){
      $("#add").click(function(){
        $("p").toggleClass("main",true);
      });
      $("#remove").click(function(){
        $("p").toggleClass("main",false);
      });
    });
    </script>
    <style>
    .main
    {
    font-size:120%;
    color:red;
    }
    </style>
    </head>
    <body>
    
    <p>This is a paragraph.</p>
    <p class="main">This is another paragraph.</p>
    
    <button id="add">Add class "main"</button>
    <button id="remove">Remove class "main"</button>
    
    
    		
  • 标签: