使用addClass()设置自增类名

时间:2023-01-20 21:18:56

  今天在翻阅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()中的调用匿名函数,参数为当前元素的索引,然后返回类名。

  效果如下:

  使用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()设置自增类名

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