在jquery 1.11.1版本中,如何实现jquery 1.9以下版本里面的toggle功能?

关于 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.** 另外一个办法是笨办法,就是把原来的那块代码拿出来,写成一个插件。
    在当前页面增加如下代码
    `$.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这个博客。

你可能感兴趣的:(前端)