jquery中点击切换的实现
项目中经常会遇到一种情况,就是点击切换,比如点击按钮,div样式为1,再点击一下按钮,div样式为2,再点击一下按钮,div样式为1。需要自定义jQuery方法toggle。
// toggle方法
$.fn.toggle = function( fn, fn2 ) {
let args = arguments,guid = fn.guid || $.guid++,i=0,
toggler = function( event ) {
let lastToggle = ( $._data( this, "lastToggle" + fn.guid ) || 0 ) % i;
$._data( this, "lastToggle" + fn.guid, lastToggle + 1 );
event.preventDefault();
return args[ lastToggle ].apply( this, arguments ) || false;
};
toggler.guid = guid;
while ( i < args.length ) {
args[ i++ ].guid = guid;
}
return this.click( toggler );
};
$("#fullScreen").toggle(function(){
$(this).css("background","url('resources/images/zoom_control.png') no-repeat 11px -170px");
},function(){
$(this).css("background","url('resources/images/zoom_control.png') no-repeat 10px 11px");
});
注意不要与jQuery中默认的toggle方法搞混淆,默认的toggle方法用于切换元素的可见状态,如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。
jquery中点击切换的实现的更多相关文章
- jquery 点击切换div
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery点击切换背景色
刚在自己的前端技术群里有个小伙伴儿问到这个问题,点击的时候进行红色背景和白色背景的切换,然后我就临时想到了一个解决方法,在这里记录一下吧,希望还有别的刚学习前端的小伙伴儿能用到,大神就请绕道咯!另外提 ...
- JQuery中点击超链接动态修改url连接地址无效
这篇随笔的标题真是好拗口,想表达的意思是,当点击超链接后,才去修改超链接的地址,此时超链接仍然链接的是是修改之前的页面,而不是修改之后的页面. 超链接代码如下: <a id="chao ...
- jquery点击切换在点击切换
<div style=" position: absolute; top: 6rem; right: 4rem;" id="hides" > < ...
- jquery——左右按钮点击切换一组图片功能
一.最终效果 二.功能分析 1.需求分析 点击左边pre按钮,显示前面三个图片,点击右边的next按钮,显示后面的一组(三个)图片.初始化只显示next按钮,到最后一组只显示pre按钮,中间过程两按钮 ...
- jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片(仿相册插件)
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...
- jquery - 通过点击切换文字内容
今天要写一个简单的显示/隐藏效果,本以为是挺简单的事儿,没想到还真因为基本功不扎实遇到了问题,这里跟大家分享一下. 百度了很多方法,精简能用的干货实在太少,最后还是通过去查jq的官方api才找到了解决 ...
- 基于jQuery左右滑动切换特效 附源码
分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效. 效果图如下: 废话不多说,代码奉上! html代码: <div ...
- 一款基于jQuery轮播切换焦点图,可播放多张图片
今天给大家分享一款基于jQuery轮播切换焦点图,可播放多张图片,在这个组件中,你可以任意指定8张图片,然后插件就会帮你自动生成缩略图,并且自动开始切换播放图片.当然,你也可以手动切换图片,只要点击缩 ...
随机推荐
- C语言面试题分类->指针
有关指针的经典面试题 C语言为何如此长寿并实用?C++为什么有那么多精彩?指针可以说是C/C++中的灵魂所在,虽然早期中pascal也有指针,但是和C/C++比起来不是一个级别的.今天为大家深入浅出的 ...
- 干货分享: 长达250页的Libvirt Qemu KVM的ppt,不实验无真相
下载地址:Libvirt Qemu KVM 教程大全 http://files.cnblogs.com/popsuper1982/LibvirtQemuKVM.pptx 1. 概论 1.1 虚拟化的基 ...
- [Swift]LeetCode99. 恢复二叉搜索树 | Recover Binary Search Tree
Two elements of a binary search tree (BST) are swapped by mistake. Recover the tree without changing ...
- [Swift]LeetCode340.最多有K个不同字符的最长子串 $ Longest Substring with At Most K Distinct Characters
Given a string, find the length of the longest substring T that contains at most k distinct characte ...
- 【TOGAF】总体认知
TOGAF是什么 TOGAF(The Open Group Architecture Framework)是当前最为流行的企业架构框架理论之一,它为一个企业或组织对于企业架构的接受.创建.使用和维护提 ...
- 如何在 Linux 上复制文件/文件夹到远程系统?
从一个服务器复制文件到另一个服务器,或者从本地到远程复制是 Linux 管理员的日常任务之一. 我觉得不会有人不同意,因为无论在哪里这都是你的日常操作之一.有很多办法都能处理这个任务,我们试着加以概括 ...
- .NET Core实战项目之CMS 第十四章 开发篇-防止跨站请求伪造(XSRF/CSRF)攻击处理
通过 ASP.NET Core,开发者可轻松配置和管理其应用的安全性. ASP.NET Core 中包含管理身份验证.授权.数据保护.SSL 强制.应用机密.请求防伪保护及 CORS 管理等等安全方面 ...
- sql server 性能调优之 死锁排查
一.概述 记得以前客户在使用软件时,有偶发出现死锁问题,因为发生的时间不确定,不好做问题的重现,当时解决问题有点棘手了.现总结下查看死锁的常用二种方式. 1.1 第一种是图形化监听: sqlserve ...
- 华为oj之字符串最后一个单词的长度
题目: 字符串最后一个单词的长度 热度指数:9697 时间限制:1秒 空间限制:32768K 本题知识点: 字符串 题目描述 计算字符串最后一个单词的长度,单词以空格隔开. 输入描述: 一行字符串,非 ...
- Solr04 - 在Jetty和Tomcat上部署Solr单机服务
目录 1 准备安装环境 2 通过内部Jetty服务器启动 3 通过配置Tomcat服务器启动 3.1 删除不需要的应用 3.2 修改服务端口 3.3 部署solr.war 3.4 扩展: 虚拟目录发布 ...