jqury中$("#div").index($this)在setTimeoutt中返回值一直是-1的问题解决方案

最新推荐文章于 2021-07-09 13:47:46 发布

qq_45670012

最新推荐文章于 2021-07-09 13:47:46 发布

阅读量170

点赞数

分类专栏：前端文章标签： jquery

原文链接：https://www.mk2048.com/blog/blog.php?id=h0jb0i2hkbib&title=jqury%E4%B8%AD%24%28%22%23div%22%29.index%28%24this%29%E5%9C%A8setTimeoutt%E4%B8%AD%E8%BF%94%E5%9B%9E%E5%80%BC%E4%B8%80%E7%9B%B4%E6%98%AF-1%E7%9A%84%E9%97%AE%E9%A2%98%E8%A7%A3%E5%86%B3%E6%96%B9%E6

版权

前端专栏收录该内容

1223 篇文章 6 订阅

订阅专栏

今天遇到一个十分蛋疼的问题，花了我一个多小时才解决，其实十分简单，但我是新手，好了，事情是这样的：

我想让鼠标停留在某个元素一定时间再显示它隐藏的内容（不然你鼠标快速滑上滑下，反反复复，如果碰上slideDown(),会让电脑反应不过来的），刚开始代码如下：

var tid = 0;
        $( ".header_middle ul li" ).hover( function() {
            
            tid = setTimeout( function() {
                    $(".hm_con_1 ").slideDown(250);
                    var $t=$(this);
                    var $t_index=$t.index();
                    $(".hm_con_1 ul ").hide().eq($t_index).show();

            }, 100 );
        }, function() {
            clearTimeout( tid );//当在1秒内退出了hover事件就取消计时代码
        } );
            $(".content1").mouseover(function () {
                $(".hm_con_1").slideUp(250);
            })
        $(".header,.menu,.top").mouseover(function (e) {
            if ($(e.target).closest(".header_middle ul li").length === 0) {
                $(".hm_con_1").slideUp(250);
            }
        })

View Code

但结果是this一直获取不到鼠标hover的元素的值，$t_index返回的都是-1，最后才反现

原生态函数中使用jQuery中的 $(this)无效（好吧，我也不知道什么是原生态函数），

所以，

只能把var $t=$(this);拿到外面去定义了

var tid = 0;
        $( ".header_middle ul li" ).hover( function() {
            var $t=$(this);
            tid = setTimeout( function() {
                    $(".hm_con_1 ").slideDown(250);
                    var $t_index=$t.index();
                    $(".hm_con_1 ul ").hide().eq($t_index).show();

            }, 100 );
        }, function() {
            clearTimeout( tid );//当在1秒内退出了hover事件就取消计时代码
        } );
            $(".content1").mouseover(function () {
                $(".hm_con_1").slideUp(250);
            })
        $(".header,.menu,.top").mouseover(function (e) {
            if ($(e.target).closest(".header_middle ul li").length === 0) {
                $(".hm_con_1").slideUp(250);
            }
        })

更多专业前端知识，请上【猿2048】www.mk2048.com