zoukankan      html  css  js  c++  java
  • Css 切换

    默认的CSS 类切换只能是无样式和指定样式之间的切换,如果想实现样式1 和样式2
    之间的切换还必须自己写一些逻辑。
    $('div').click(function () {
    $(this).toggleClass('red size'); //一开始切换到样式2
    if ($(this).hasClass('red')) { //判断样式2 存在后
    $(this).removeClass('blue'); //删除样式1
    } else {
    $(this).toggleClass('blue'); //添加样式1,这里也可以addClass
    }
    });
    上面的方法较为繁琐,.toggleClass()方法提供了传递匿名函数的方式,来设置你所需要
    切换的规则。
    $('div').click(function () {
    $(this).toggleClass(function () { //传递匿名函数,返回要切换的样式
    return $(this).hasClass('red') ? 'blue' : 'red size';
    });
    });
    注意:上面虽然一句话实现了这个功能,但还是有一些小缺陷,因为原来的class 类没
    有被删除,只不过被替代了而已。所以,需要改写一下。
    $('div').click(function () {
    $(this).toggleClass(function () {
    if ($(this).hasClass('red')) {
    $(this).removeClass('red');
    return 'green';
    } else {
    $(this).removeClass('green');
    return 'red';
    }
    });
    });
    我们也可以在传递匿名函数的模式下,增加第二个频率参数。
    var count = 0;
    $('div').click(function () {
    $(this).toggleClass(function () {
    return $(this).hasClass('red') ? 'blue' : 'red size';
    },count++ % 3 == 0); //增加了频率
    });
    对于.toggleClass()传入匿名函数的方法,还可以传递index 索引、class 类两个参数以及
    频率布尔值,可以得到当前的索引、class 类名和频率布尔值。
    var count = 0;
    $('div').click(function () {
    $(this).toggleClass(function (index, className, switchBool) {
    alert(index + ':' + className + ':' + switchBool); //得到当前值
    return $(this).hasClass('red') ? 'blue' : 'red size';
    },count++ % 3 == 0);
    });

  • 相关阅读:
    C#学习之自定义类实现foreach
    C#学习之用迭代器实现枚举器
    silverlight学习之获取照片的路径
    Java语言基础基本数据类型与运算符
    Java语言基础数组
    Asp.Net 学习资源列表
    测试第一篇BLOG文,高亮代码
    当屌丝想看《蜀山剑侠传》[python屏幕抓取]
    jQuery数据显示插件整合
    腾讯面试题:50个阶梯,你一次可以上一阶或两阶,走上去,共有多少种走法【原】
  • 原文地址:https://www.cnblogs.com/zzhui/p/5138715.html
Copyright © 2011-2022 走看看