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类库,然后在网页上写一写$("#") ...
随机推荐
- 【TS】学习总结
[TS]学习总结 01-TypeScript编译环境 TypeScript全局安装 npm install typescript -g tsc --version //查看版本,安装成功 TypeSc ...
- .net core 通过动软连接数据库
.net core 与动软 首先创建asp.net core 或者 .net core 控制台程序.不需急着创建web.config 文件. 通过NuGet加个ado的包 System.Data.Sq ...
- ansible 常用模块总结
记录常用的模块功能,详细使用查看官网. 1. file模块 创建软连接 ansible test -m file -a "src=/tmp/conf.d dest=/tmp/conf.d s ...
- UWP App Data存储和获取
这篇博客介绍如何在UWP开发时,如何存储App Data和获取. App Data是指用户的一些设定,偏好等.例如,App的主题,是否接收推送,离线接收消息等.需要区分下App Data和User D ...
- 请问在电脑里PNP是什么意思啊?
PnP(Plug and Play,即插即用)是指用户不必干预计算机的各个外围设备对系统资源的分配,而将这一繁杂的工作交给系统,由系统自身去解决底层硬件资源,包括IRQ(中断请求).I/O(输入输出端 ...
- [SWMM]弗汝德数
弗汝德数(Froude number)是流体内惯性力与重力的比值.弗汝德数(Fr)是水力学中重要的无量纲数之一,它表示过水断面上单位重量液体具有的平均动能与平均势能的比值,它也表示水流惯性力与重力的比 ...
- 再也不用担心了,微软官方系统(win10为例)U盘安装教程
参考文章地址 使用微软官方工具安装纯净版操作系统. 一.准备工作 检查电脑规格是否支持安装(主要看看系统配置是否满足系统运行的最低要求) 一台联网电脑(不一定非是要装系统的那台): 一个≥8G 空间的 ...
- tomcat启动与运行时出现中文乱码问题
解决方法 到tomcat/conf/目录下 修改logging.properties 找到 java.util.logging.ConsoleHandler.encoding = utf-8这行 更 ...
- 使用volatile的条件
使用volatile的值不能依赖于它之前的值: volatile这个关键字可能很多朋友都听说过,或许也都用过.在Java 5之前,它是一个备受争议的关键字,因为在程序中使用它往往会导致出人意料的结果. ...
- Java如何调用C语言程序,JNI技术
Java为什么要调用C语言编写的程序因为涉及操作系统底层的事件,Java是处理不了的,例如用户上传一个视频文件,需要后台给视频加上水印,或者后台分离视频流和音频流,这个事Java就做不了,只能交给C语 ...