关于 Jquery 中toggle函数今天遇到了个问题(toggle方法不起作用)。
介绍一下toggle 1. 定义和用法: toggle() 方法切换元素的可见状态。 如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。 2. 语法 $(selector).toggle(speed,callback,switch) 3. 提示和注释 注释:该效果适用于通过 jQuery 隐藏的元素,或在 CSS 中声明 display:none 的元素(但不适用于 visibility:hidden 的元素)。 4. 问题如下:点击id为prizeBtn的按钮,切换不了奖金的使用情况。 涉及到有问题的代码:
$('#prizeBtn').toggle( function(){ var iptNum = Number($('#investAmount').val()); //输入买入金额 var minNum = Number($('#prizeNum').html()); //奖金金额 $('#prizeBtn').css('color','#c7c7c7'); //按钮不可点击 $("#totalNum").html(fmoney(iptNum) ); $('#rewardAmount').val(0); },//不使用奖金 function(){ var iptNum = Number($('#investAmount').val()); //输入买入金额 var minNum = Number($('#prizeNum').html()); //奖金金额 var oniAmt = Number($('#oniAmt').val()); if(iptNum >= oniAmt && minNum > 0 && iptNum >= minNum){ $('#prizeBtn').css('color','#f86402'); //按钮可点击 $("#totalNum").html(fmoney(Number(iptNum + minNum).toFixed(2)));//买入总计 $('#rewardAmount').val(minNum); } } //使用奖金 )在jquery 1.9以下版本里面,可以用toggle来实现,点击一次按钮上面的代码,在之前是好用的,当jquery.js文件变成1.11.1版本后(之前其实也是这个版本),该效果就不能实现了。
5. 解决方案:
**1.** 如果你非常喜欢这个功能,有2个办法,一个办法是jquery官网提供的一个版本升级文件。http://blog.jquery.com/2013/05/08/jquery-migrate-1-2-1-released/
**2.** 另外一个办法是笨办法,就是把原来的那块代码拿出来,写成一个插件。 在当前页面<script type="text/javascript"></script>增加如下代码 `$.fn.toggle = function( fn ) { // Save reference to arguments for access in closure var args = arguments, guid = fn.guid || jQuery.guid++, i = 0, toggler = function( event ) { // Figure out which function to execute var lastToggle = ( jQuery._data( this, "lastToggle" + fn.guid ) || 0 ) % i; jQuery._data( this, "lastToggle" + fn.guid, lastToggle + 1 ); // Make sure that clicks stop event.preventDefault(); // and execute the function return args[ lastToggle ].apply( this, arguments ) || false; }; // link all the functions, so any of them can unbind this click handler toggler.guid = guid; while ( i < args.length ) { args[ i++ ].guid = guid; } return this.click( toggler ); }` **3.**找到jquery.min.js下载放入到对应程序中即可。 忽略Jquery版本,直接使用压缩版本的js文件。 <script type="text/javascript" src="${staticPath}/js/jquery.min.js"></script>以上为遇到此问题的总结,借鉴了http://bbs.csdn.net/topics/390898495这个博客。
