• 关于

    切换(Toggle)

    的搜索结果

问题

关于jquery toggle()切换两个函数时报错问题

吴孟桥 2019-12-01 19:36:58 1282 浏览量 回答数 1

回答

如果是添加删除,就判断有没有就可以了。如果是只是切换显示隐藏,就判断当前状态就好了。jquery1.9之前:$('#example').click(function(){$("#example2").toggle();})jquery1.9之后: $('#example').click(function(){ if($("#example2").is(":hidden")){ $("#example2").show(); }else{ $("#example2").hide(); } }) 另外也可以通过toggleClass切换类,用类的css来实现

小旋风柴进 2019-12-02 02:26:49 0 浏览量 回答数 0

问题

用toggle()方法如何实现背景色来回切换?

小旋风柴进 2019-12-01 19:35:34 1033 浏览量 回答数 1

回答

jQuery 1.8之后就不支持事件的切换,仅用来元素的隐藏与显示。不过,可以通过自己写代码实现。1.通过flag来控制执行执行哪个函数。比如执行fn1时,flag置为true;执行fn2时,flag置为false.2.通过给元素加减class来控制那个函数。和方法1类型。3.代码实现toggle,避免方法1和方法2中添加变量和操作dom,毕竟这两个都需要开销,原理类似于递归调用,代码如下。$('#btn').one('click', function(){ handler1();//第一次已经是click了,所以需要先执行一次handler1 setTimeout(fn1, 200);//防止后面定义的事件被触发。 }); function fn1(){ var obj = $(this); obj.one('click',function(){ handler2(); fn2(obj); }); } function fn2(obj){ obj.one('click',function(){ handler1(); fn1(obj); }); } function handler1(){ console.log('11'); } function handler2(){ console.log('22'); }当然为了使用方便,也可以封装成jQuery插件的模式。 $.fn.toggleEx = function(handler1, handler2){ $(this).one('click', function(){ handler1(); setTimeout(fn1, 200);//防止后面定义的事件被触发。 }); function fn1(){ var obj = $(this); obj.one('click',function(){ handler2(); fn2(obj); }); } function fn2(obj){ obj.one('click',function(){ handler1(); fn1(obj); }); } } //使用方式和之前一样。 $('#btn').toggleEx(function(){ console.log('11'); }, function(){ console.log('22');

小旋风柴进 2019-12-02 02:28:33 0 浏览量 回答数 0

问题

新手求指导,toggle()问题

a123456678 2019-12-01 20:24:51 923 浏览量 回答数 1

问题

jquery.watermark.min.js:报错

kun坤 2020-06-05 22:57:32 0 浏览量 回答数 1

回答

引用来自“milin”的评论直接用jquery好了,写的那么麻烦 以下代码取自: JS, JQUERY实现全选,反选。 其中,我将 <script src="js/jquery-1.8.3.min.js"></script> 改成: <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> 测试一下,似乎正是你所要的效果。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="checkbox" value="全选" id="ckAll"/>水果</br> <div class="box"> <input type="checkbox" value="苹果" id="apple"/>苹果 <input type="checkbox" value="香蕉" id="bann"/>香蕉 <input type="checkbox" value="橘子" id="origin"/>橘子 </div> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript">        //给所有 .box input 元素添加 checked = ckAll 当前的状态;        //prop('checked',value) ,第一个值获取属性,第二个值:设置属性值。prop只有一个参数时,表示获取元素属性。         $('#ckAll').click(function(){            $('.box input').prop('checked',$(this).prop('checked')); }); $('.box input').click(function(){ //each 便利每一个元素,让其执行该函数 $('.box input').each(function(){ if(!$(this).prop('checked')){ $('#ckAll').prop('checked',false); //有一个不满足就 跳出该循环,避免执行下面 return false; }else{ $('#ckAll').prop('checked',true); } }) })</script> </body> </html>  ######嗯嗯,是这样的,感谢分享!######一个不选中的场景,是否应当写成:if(!select1Input[i].checked){...}? 你少写了属性:checked。######if(!select1Input[i].checked){...}还是不管用###### 提问: 识别号为"selectAll"的html元素是什么类型?(type="?") 鉴于代表它的变量all 有个属性onclick (all.onclick), 我猜是 type="button"。可是它同时又有一个属性 checked, 我想它可能是 type="checkbox"。因此,我觉得,这个应当设立两个元素:一个 type="button", 一个 type="checkbox"。 请告诉我 元素 "selectAll" 是什么类型(type="?")。我不太明白这句话:"一个不选中,全选框也取消的效果"。全选框是否指的是 id="selectAll" 这个元素? "也取消" 是否是指 这个全选框消失?或它的checked 由 true 变为 false?  建议: 1.    定义 方法 selectReverse 的代码是否可以改成: var selectReverse = reverse.onclick = function(){     for (var i=0; i<select1Input.length; i++) {     select1Input[i].checked= !select1Input[i].checked;     } } 2.   将变量名称 reverse 换成 toggle。Toggle(切换),即使用自定义效果来显示或隐藏匹配的元素。这里,指的是 在  选中/未选中 (checked:true/false) 之间切换。鉴于 reverse 已经被 js 用于颠倒数组中元素的顺序的方法名: reverse(), 这里就不宜再用做其它的意思了。又发现,jQuery 中 toggle() 方法 是用来切换元素的可见状态的。如果是要"全选框也取消",即 全选框也消失, 那么 toggle 就最合适不过了。######回复 @良辰2250 : 我刚发一贴回答。可能正合你意。######回复 @tcxu : 点全选复选框可以全部选中,如果取消其中一个选项,全选复选框就不会选中。我是想让全选复选框与它的选项们之间有一个这样联动的效果呢######回复 @良辰2250 : 谢谢答复。你说:"一个不选中,全选框也取消的效果"。这是什么效果? 看来,全选框指的是 id="selectAll" 这个元素。 "也取消" 指是什么情况?是指 这个全选框消失, 还是指,一旦全选框的 checked 为 false, 其它所有的checkbox 的 checked 都会 是 false?######select1Input[i].checked= !select1Input[i].checked; 嗯,这样会更好######都是复选框:全选、反选、各选项: <label><input id="selectAll" type="checkbox" />全选/取消全选</label> <label><input id="selectReverse" type="checkbox" />反选</label><label><input type="checkbox" name="ability" />js</labe>######var selectAll=function (flag){ for(var i=0;i<select1Input.length;i++){ select1Input[i].checked=flag; } all.checked=flag; } 难道是这个意思?######和上面的效果也一样######直接用jquery好了,写的那么麻烦######借助于 网上的代码,如: <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> 有一个弊端:万一那个代码网页找不到(当然,不希望如此),你自己的代码也就无法运行了。我明白了你的用意之后,就尝试修改你的代码。结果发现,不用 JQuery 也会奏效。请测试。 var all = document.getElementById('selectAll'); var reverse = document.getElementById('selectReverse'); var select1Input = document.getElementsByName('ability'); var selectAll = function(flag){ for (var i=0; i<select1Input.length; i++){ select1Input[i].checked = flag; } } for (var i=0;i<select1Input.length;i++) select1Input[i].onclick = function(){ all.checked = false; } var selectReverse = reverse.onclick = function(){ for (var i=0; i<select1Input.length; i++) { select1Input[i].checked= !select1Input[i].checked; } } all.onclick = function(){ if (all.checked) { selectAll(true); } if (!all.checked){ selectAll(false); } }  ######谢谢啦我参考了http://www.cnblogs.com/lk4525/p/6513924.html 里面一个计数器,补充了一点######/* 全选、不选、反选 */ var all = document.getElementById('selectAll'); var reverse = document.getElementById('selectReverse'); var select1Input = document.getElementsByName('ability'); var selectAll = function selectAll(flag) { for(var i=0; i<select1Input.length; i++) { select1Input[i].checked = flag; } } for(var i=0; i<select1Input.length; i++) { select1Input[i].onclick = function() { //引入计数器 var sum = 0; for(var j=0; j<select1Input.length; j++) { if(select1Input[j].checked) { sum += 1; if(sum == select1Input.length) { all.checked = true; } else { all.checked = false; } } } } } var selectReverse = reverse.onclick = function(){ for (var i=0; i<select1Input.length; i++) { select1Input[i].checked= !select1Input[i].checked; } } all.onclick = function() { if(all.checked) { selectAll(true); } if(!all.checked) { selectAll(false); } }  ######$(document).on("click", ".checkAll", function (ev) { $(this).parents("table").find(".option .checkSingle").prop("checked", $(this).prop("checked")); }); $(document).on("click", ".checkSingle", function (ev) { var checked = $(this).parents("table").find(".option .checkSingle:not(:checked)").length == 0; $(this).parents("table").find(".checkAll").prop("checked", checked); });######回复 @Tis : 嗯嗯,方法有很多######判断全选框是否应该选中,只要判断 单选框的选中数量 和 总数量是否相等。######为什么写到循环里,直接all.checked=flag不可以?并且你click的时候已经改变all了,为什么还要在selectall里面改变下。还有,全选click里面的if意义在哪?直接selectAll(this.checked)不就好了######测试:点全选,再取消一个选项,再选中,会发现全选框居然不选中了。selectAll(flag)在all.onclick的里面是可以全选,但会存在一个如上的问题。所以引入一个计时器(选中的要和全部数一样),这时所有复选框都选中了,全选框才会是选中的状态

kun坤 2020-06-09 13:59:32 0 浏览量 回答数 0

问题

javascript onclick 无法触发其引用的自定义函数

小旋风柴进 2019-12-01 20:22:18 1696 浏览量 回答数 1

回答

原因清楚了,JQ里面toggle()实现的方式是display:none和table-row切换,slideToggle()是display:none和block切换,table里面的tr用block的时候会导致布局错误。解决方法就是改display的值。

小旋风柴进 2019-12-02 02:26:33 0 浏览量 回答数 0

问题

支持自定义皮肤的 HTML5 音乐播放器

寒喵 2019-12-01 21:51:19 926 浏览量 回答数 0

问题

想实现图片切换功能,但是最终效果是点击右边小图,左边显示的一直是最后一张图

小旋风柴进 2019-12-01 19:29:25 1454 浏览量 回答数 0

回答

jquery 有toggle()的方法可以满足你的切换展示和隐藏。

吴孟桥 2019-12-02 02:31:10 0 浏览量 回答数 0

回答

先判断你要加的东西是否已经存在了就好。如果不存在,添加如果已存在,切换显隐状态 (toggle)

杨冬芳 2019-12-02 02:55:03 0 浏览量 回答数 0

问题

如何根据键盘输入来切换布尔值?

kun坤 2019-12-25 09:44:36 4 浏览量 回答数 1

回答

因为你的jquery是用一个立即执行的函数表达式包括的,就是自动立即执行。toggle()方法好像已经改了,改成只是单纯切换display的block或none。这个是jquery官网给出的解释:Description: Display or hide the matched elements.

小旋风柴进 2019-12-02 02:22:07 0 浏览量 回答数 0

问题

包含导航栏子菜单代码的外部Java脚本文件不起作用

游客oc2yquon3gedc 2019-12-01 22:06:20 3 浏览量 回答数 0

问题

bootstrap的Tab切换不了标签页

小旋风柴进 2019-12-01 20:19:32 1837 浏览量 回答数 1
阿里云大学 云服务器ECS com域名 网站域名whois查询 开发者平台 小程序定制 小程序开发 国内短信套餐包 开发者技术与产品 云数据库 图像识别 开发者问答 阿里云建站 阿里云备案 云市场 万网 阿里云帮助文档 免费套餐 开发者工具 企业信息查询 小程序开发制作 视频内容分析 企业网站制作 视频集锦 代理记账服务 企业建站模板