关于 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这个博客。