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

  • 相关阅读:
    在CentOS 8 上 部署 .Net Core 应用程序
    Asp.Net Core 查漏补缺《一》 —— IStartFilter
    接口相关数据日志打印
    退款
    识别身份证
    生成二维码
    打造一款简单易用功能全面的图片上传组件
    Redis过期策略+缓存淘汰策略
    Redis主从复制
    .net 平台常用框架
  • 原文地址:https://www.cnblogs.com/zzhui/p/5138715.html
Copyright © 2011-2022 走看看