使用addClass()设置自增类名

　　今天在翻阅JQuery API的时候发现，addClass()方法不仅可以添加类，同时可以调用回调函数。

　　代码如下：

　　　　

<body>
    <p>item1</p>
    <p>iem2</p>
    <p>item3</p>
</body>
    <script type="text/javascript">
            $(function(){
        $("p").addClass(function (index) {
            return "item"+index;            
        })
    })();

    </script>

　　在addClass()中的调用匿名函数，参数为当前元素的索引，然后返回类名。

　　效果如下：

　　

 

　　当然，这个回调函数可以设置两个参数，第一个为index，第二个为类名参数，主要用于控制语句。

　　代码如下：

　　　　

<style>
        .red{
            background: red;
        }
        .green{
            background: green;
        }
    </style>
</head>
<body>
    <p>iem2</p>
    <p class="red">item1-red</p>
    <p>item3</p>
</body>
    <script type="text/javascript">
            $(function(){
        $("p").addClass(function (index,currentClass) {
            var addedClass;
            if(currentClass=="red"){
                addedClass="green";
                $(this).text("item-green");
                return addedClass;
            }            
        })
    })();

    </script>

　　效果如下：

　　由此我们可以看到，addClass()的作用仅仅是添加类，而不是覆盖类。若想移除，可以使用removeClass()配合。

 

posted @ 2016-07-04 10:57  语折  阅读(992)  评论(0)  编辑  收藏  举报