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);
    });

  • 相关阅读:
    ASP.NET 2.0 web.config数据库连接设置与读取
    一句话影评
    百度地图api示例
    centos5.8 误改/etc/fstab后导致系统进不去 解决办法
    Nginx Gzip 压缩配置
    数据库设计的三大范式
    CentOS 6.0下vncserver安装配置
    MySQL配置文件my.cnf设置
    Linux下zip加密压缩
    keepalived的log
  • 原文地址:https://www.cnblogs.com/zzhui/p/5138715.html
Copyright © 2011-2022 走看看