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类库,然后在网页上写一写$("#") ...
随机推荐
- MySQL-08-索引简介
B树 基于不同的查找算法分类介绍 B*Tree B-tree B+Tree 在范围查询方面提供了更好的性能(> < >= <= like) 索引简介 索引作用 提供了类似于书中 ...
- [源码解析] 深度学习流水线并行GPipe (2) ----- 梯度累积
[源码解析] 深度学习流水线并行GPipe (2) ----- 梯度累积 目录 [源码解析] 深度学习流水线并行GPipe (2) ----- 梯度累积 0x00 摘要 0x01 概述 1.1 前文回 ...
- 关于windows下 python3安装 cython的说明
针对python3.6希望在windows环境下安装cython,但是网上任何关于mingw的尝试都没有生效.所以只能下载 vs, 1.去官网https://visualstudio.microsof ...
- ant的javac任务的相关属性配置
任务和javac命令是相似,它编译两种类型的Java文件1)没有被编译的java文件2)曾经编译过,但是class文件版本和当前对应的java文件版本不匹配的java文件. 1)javac命令支持的参 ...
- Spark消费Kafka如何实现精准一次性消费?
1.定义 精确一次消费(Exactly-once) 是指消息一定会被处理且只会被处理一次.不多不少就一次处理. 如果达不到精确一次消费,可能会达到另外两种情况: 至少一次消费(at least onc ...
- windows安装trojan记录
1.trojan 客户端安装教程 https://v2raytech.com/trojan-clients/ 2.chrome安装插件(crx文件)教程 https://www.jianshu.com ...
- Kickstart部署之HTTP架构
原文转自:https://www.cnblogs.com/itzgr/p/10029527.html作者:木二 目录 一 准备 1.1 完整架构:Kickstart+DHCP+HTTP+TFTP+PX ...
- MySQL主从复制NEW
1.复制配置 主机一定要开启二进制日志(这里建议配置RBR) 每个主机和每个从机一定要配置一个位移的id,即server-id 每个从机配置一定要包含主机名称,日志名称,和位置 ...
- Qt之文件操作
虽然文件操作是一项很常用的功能,但是总记不住,今天就干脆记了一下笔记,以后好查阅. 在Qt中,主要使用的是QFile类进行文件操作,因此要包括#include <QFile>头文件.下面就 ...
- Linux下SSH以及SSH秘钥
一.基于秘钥方式实现远程连接 第一步:创建密钥对(在管理端服务器上操作) 中间的输入项可以直接回车 ssh-keygen -t dsa 第二步:分发公钥(在管理端服务器执行) 这个步骤需要输入一个ye ...