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:#}
</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 位置。

更多相关文章
  • jquery手册描述: data 发送到服务器的数据.将自动转换为请求字符串格式.GET 请求中将附加在 URL 后.查看 processData 选项说明以禁止此自动转换.必须为 Key/Value 格式.如果为数组,jQuery 将自动为不同值对应同一个名称.如 {foo:["bar1 ...
  • 本文实例讲述了jQuery中index()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以搜索匹配元素,并返回元素的索引值.索引值是从0开始的. 语法结构一: 当此方法没有参数的时候,返回值是指定元素在其同辈元素集合中的索引位置. 代码代码如下: $(selector).index()  
  • 参考原文:深度理解Jquery 中 offset() 方法
  • 第一个Ajax例子 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </ ...
  • 本文是对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所幫助     详细解读Jquery各Ajax函数:$.get(),$.post(),$.ajax(),$.getJSON() 一,$.ge ...
  • 解析JQuery中css()方法,獲取元素CSS值之getComputedStyle方法(轉載,寫的很好)
    一.碎碎念~前言 我们都用过jQuery的CSS()方法,其底层运作就应用了getComputedStyle以及getPropertyValue方法. 对于那些只想混口饭吃的人来讲,晓得CSS()如何使用就足够了.对于希望在JS道路上越走越远的来人说,简单了解一些JS库底层实现对自己的学习很有幫助.
  • 这是工作遇到scrollTop() 方法.为了强化自己,把它记录在博客园当中. 下面就开始scrollTop 用法讲解: scrollTop() 定义和用法 scrollTop() 方法设置或返回被选元素的[垂直滚动条位置]. Note: 当滚动条位置位于最顶部时,位置是0:当用于返回位置时:   
  • 最近项目中,需要在一个bpl中调用另一个bpl中的单元的方法, 方法如下:   在被调用的单元中定义: procedure Inner_Ex(VoucherType: TVoucherType); exports Inner_Ex;   实现: procedure Inner_Ex(VoucherT ...
一周排行