switchery插件:多个按钮,用jquery进行切换
单个按钮可以参照这个链接https://blog.csdn.net/u012233776/article/details/53305846
多个按钮时,
html中其中想操作这个按钮开启与关闭
<div class="form-group"> <label class="col-sm-3 control-label">付费用户2</label> <div class="col-sm-8"> <input type="checkbox" name="ss" value="1" class="js-switch test" /> </div></div><!--<div class="hr-line-dashed"></div>-->
js
/**
* 切换Switchery开关函数 switchElement Switchery对象,checkedBool 选中的状态
*/
function setSwitchery(switchElement, checkedBool) {
if((checkedBool && !switchElement.isChecked()) || (!checkedBool && switchElement.isChecked())) {
switchElement.setPosition(true);
switchElement.handleOnchange(true);
}
} // 切换按钮初始化
var switchery = [];
var elems = document.querySelectorAll('.js-switch');
for (var i = 0; i < elems.length; i++) {
switchery[i] = new Switchery(elems[i]);
}
现在就需要获取需要切换的dom的index
var js_switch_index = $('.js-switch').index($('.js-switch.test'));
setSwitchery(switchery[js_switch_index], true);//开启
setSwitchery(switchery[js_switch_index], false);//关闭
switchery插件:多个按钮,用jquery进行切换的更多相关文章
- 纯手工打造漂亮的瀑布流,五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox!
前两天写的文章<纯手工打造漂亮的垂直时间轴,使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身!>受到很多网友的喜爱,今天特别推出姊妹篇<纯手工打造漂亮的瀑 ...
- 瀑布流,五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox!
纯手工打造漂亮的瀑布流,五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox! 前两天写的文章<纯手工打造漂亮的垂直时间轴,使用最简 ...
- 10 款基于 jQuery 的切换效果插件推荐
本文整理了 10 款非常好用的 jQuery 切换效果插件,包括平滑切换和重叠动画等,这些插件可以实现不同元素之间的动态切换. 1. InnerFade 这是一个基于 jQuery 的小插件,可以实现 ...
- 10款好用的 jQuery 图片切换效果插件
jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的效 ...
- 推荐几款jquery图片切换插件
一.前言 毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利 ...
- FlexSlider jQuery滑动切换插件 参数
demo:http://www.sucaihuo.com/jquery/0/6/demo/ FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所 ...
- 不定义JQuery插件,不要说会JQuery 分类: JavaScript 2014-11-24 14:18 155人阅读 评论(0) 收藏
一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人 ...
- [转]不定义JQuery插件,不要说会JQuery
一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写("#"),("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人,直 ...
- 不定义JQuery插件,不要说会JQuery
转自:http://www.cnblogs.com/xcj26/p/3345556.html 一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#") ...
随机推荐
- 适配Android10 拍照,相册,裁剪,上传图片
这篇文章主要介绍了适配Android 10(Q)后,调用系统拍照,系统相册,系统裁剪和上传问题,这是一个很常用的功能,但是在Android 6.0,Android 7.0和Android 10.0以上 ...
- S3C2440—10.代码重定位
文章目录 一.启动方式 1.1 NAND FLASH 启动 1.2 NOR FLASH 启动 二. 段的概念 2.1 重定位数据段 2.2 加载地址的引出 三.链接脚本 3.1 链接脚本的引入 3.2 ...
- Java Web JSTL实现登陆页面重定向 jstl标签
<form action="js/loginResult.jsp" class="loginForm" id="loginForm" ...
- SSM自学笔记(七)
14.MyBatis的多表操作 1.MyBatis的多表操作 1.1 一对一查询 一对一查询的模型 用户表和订单表的关系为,一个用户有多个订单,一个订单只从属于一个用户 一对一查询的需求:查询一个订单 ...
- 【Azure 应用服务】App Service For Container 配置Nginx,设置/home/site/wwwroot/目录为启动目录,并配置反向代理
问题描述 通过Docker Desktop for Linux,配置Nginx镜像后,自定义nginx.conf文件,修改启动目录和对 /out 路径的反向代理到博客园的博文地址 (https://w ...
- C#中的信号量---Semaphore
emaphore是System.Threading下的类,限制可同时访问某一资源或资源池的线程数. 常用构造方法 https://msdn.microsoft.com/zh-cn/library/e1 ...
- Contos7 克隆实例 以及 配置网络-服务-等相关信息
以下为我自己整理的克隆虚拟机和设置固定IP的方法,记录一下,以防忘记: 桥接模式网络配置 1.配置ip地址等信息在文件里做如下配置: /etc/sysconfig/network-scripts/if ...
- IO异常--缓冲流--转换流--序列化流( IO流2 )
1.IO异常的处理 JDK7前处理:使用try...catch...finally 代码块,处理异常部分 // 声明变量 FileWriter fw = null; try { //创建流对象 fw ...
- Spring之属性注入
时间:2017-1-31 23:38 --Bean的属性注入方式有三种注入方式: 1)接口注入: 定义一个接口,定义setName(String name)方法,定义一个类,实现该 ...
- 硬核! Github上 ,star超高的Java 开源项目分享给你!
Awsome JavaGreat Java project on Github(Github 上非常棒的 Java 开源项目). English Version 大家都知道 Github 是一个程序员 ...