在嵌套函数中使用'this'

时间:2017-10-04 09:44:37

标签: javascript jquery function this

哇..获取关于'this'的真实信息很容易,因为谷歌基本上忽略了这个词。

代码使用缩略图中的信息打开数据库中的图像.. onlick正常工作,悬停代码有效,但我无法弄清楚如何从mouseenter获取'this'以在showModal中使用功能

        function showModal() {
        $("body").css("overflow-y", "hidden");
        $(".small").removeClass("smallHover");
        $(".modal").fadeIn(200);

        var altLong = $(this).attr("alt");
        var altSplit = altLong.split("#");
        $(".picTitle").text(altSplit[0]);                                           
        var srclong = $(this).attr("src");
        var srcshort = srclong.split("_");
        var srcextension = srclong.split(".");      
        $(".big").attr("src", srcshort[0]+'.'+srcextension[1]); 
    }
    $(".small").click(showModal);

    var timer;
    $(".small").mouseenter(function() {
        timer = setTimeout(function(){
            $(this).showModal(); // **<--this is the line that doesnt work**
        }, 2000);
    }).mouseleave(function() {
        clearTimeout(timer);
    });

如果你能解释为什么你会使用$(this)作为jquery对象而不仅仅是'this'以及它们如何区别,那就太好了。提前谢谢〜!

2 个答案:

答案 0 :(得分:3)

这有两个不同的方面。

  1. this回调中获得正确的setTimeout

  2. 使用showModal

  3. 致电this

    #1由this question's answers解决。你有几个选项,在这种情况下最简单的(现在)可能是使用变量:

    $(".small").mouseenter(function() {
        var _this = this; // ***
        timer = setTimeout(function(){
            $(_this).showModal(); // ***
        }, 2000);
    }).mouseleave(function() {
        clearTimeout(timer);
    });
    

    ...但该代码仍然无法正常工作,因为showModal不是jQuery对象的属性,它是一个独立的函数。要使用特定this进行调用,您可以使用Function.prototype.call

    $(".small").mouseenter(function() {
        var _this = this;
        timer = setTimeout(function(){
            showModal.call(_this); // ***
        }, 2000);
    }).mouseleave(function() {
        clearTimeout(timer);
    });
    

    (或者,更改showModal以接受元素作为参数,然后将其作为参数传递。)

    有关this question's answers as well this以及this (old) post on my anemic little blog的详情。

答案 1 :(得分:0)

如果您可以像这样更改showModel函数,这也会有效:

 $.fn.showModal = function() { 
        $("body").css("overflow-y", "hidden");
        $(".small").removeClass("smallHover");
        $(".modal").fadeIn(200);
        ... 
     }

和里面的计时器方法

 $(this).showModal();