zoukankan      html  css  js  c++  java
  • jquery中 toggleClass方法的一种用法

    <html>
    <head>
    <script src="js/jquery.js" type="text/javascript"></script>  
    </head>
    <body>
    <style>
    .list_1{color:red}
    .list_2{color:green}
    .list_3{color:blue}
    .list_4{color:#666}
    </style>
    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    </ul>
    
    <button class="b1">方式一提交</button>
    <button class="b2">方式二提交</button>
    
    <script>
    $(document).ready(function () {
        $(".b1").click(function () {
            $('ul li').toggleClass(function () {
                 return 'list_' + $(this).index();
            });
        });
        
        $(".b2").click(function () {
            $('ul li').toggleClass(function (index) {
                return 'list_' + index;
            });
        });
    })
    </script> 
    <body>
    </html>

    两种方式效果一致。

    $(selector).toggleClass(function(index,class),switch)  其中index可选,接受选择器的位置。

    jquery index()  方法返回指定元素相对于其他指定元素的 index 位置。

  • 相关阅读:
    geoserver 文件系统
    geoserver 源码介绍
    geoserver 开发2
    geoserver 开发1
    geoserver笔记
    linux 下安装gult
    LINUX 笔记5
    SQLSTATE[HY000] [2002] 乱码
    微信开发
    javascript记忆
  • 原文地址:https://www.cnblogs.com/bigdesign/p/4004559.html
Copyright © 2011-2022 走看看