JQuery的toggle()函数异常(自动触发|隐藏)

前几天有朋友找我看一个Bug,一个很坑的Bug,特此记录一下,下次再遇到就好解决了,Bug是这样的:

通过JQuery的toggle()函数给ID为hphoto的元素绑定了两个依次点击的函数,这两个函数按理说是要点击ID为hphoto的元素的时候才依次触发的,但是在页面加载的时候就自动触发了,而且ID为hphoto的元素也莫名其妙被隐藏了。

情况如图:

1610297208

代码如下:

$("#hphoto").toggle(function(){
$(".card").show();
console.log("点击了显示");
},function(){
$(".card").hide();
console.log("点击了隐藏");
});

正常的情况应该是ID为hphoto的元素正常显示,然后第一次点击就显示“.card”,第二次点击就隐藏“.card”,依次循环。

image-20210111003715680

然后通过度娘找到类似的情况得到了答案:

在1.9以后的版本toggle()就存在这个问题,用之前的版本就正常了

解决办法:

1.去 jquery官网下载一个版本升级文件。http://blog.jquery.com/2013/05/08/jquery-migrate-1-2-1-released/

2.把原来的那块代码拿出来,写成一个插件(代码在下面)

引用于:https://www.cnblogs.com/weimingxin/p/8663356.html

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script type="text/javascript" src="http://cdn.staticfile.org/jquery/1.11.1/jquery.js"></script>
</head>
<body>
<button>test click me</button>
<script>
    $(document).ready(function(){
        $("button").toggle(function(){
            $("body").css("background-color", "green");
        }, function(){
            $("body").css("background-color", "red");
        }, function(){
            $("body").css("background-color", "yellow");
        });
    });
 
    $.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 );
    }
</script>
</body>
</html>

如文章表述有不足之处还请斧正,如果有更好的实现方法请大佬留言一下

本文章为本博客原创,转载请标明来源于本站,谢谢

最后修改:2021 年 01 月 11 日 01 : 05 AM
如果觉得我的文章对你有用,请随意赞赏