Question

首先，我很抱歉，但我是一个非常大的初学者。

我真的不明白jquery插件中的“this”，看起来很多但是找不到任何答案。

这是我的插件（即时通讯仅用于练习）

jQuery.fn.hoverPlugin = function(){

    var element = this; 

    $(element).animate({"opacity" : ".5"});


        $(element).hover(function(){
            $(element).stop().animate({"opacity" : "1"});
        }, function() {
            $(element).stop().animate({"opacity" : ".5"});
        });
};

电话

$("img").hoverPlugin();

我的问题是这样它会在所有图像上添加动画效果。如果对页面上的所有图像进行动画加载都没关系，但是当我将鼠标放在图像上时，它会激活所有图像。

如果我以简单的方式写它

$("img").animate({"opacity" : ".5"});


        $("img").hover(function(){
            $(this).stop().animate({"opacity" : "1"});
        }, function() {
            $(this).stop().animate({"opacity" : ".5"});
        });

它按我想要的方式工作。

因此，如果有经验的开发人员可以向我解释如何在我的插件中进行此操作？我真的很开心。

谢谢

Answer 1

这是因为this函数中的.hoverPlugin引用了用于调用它的$('img')：

jQuery.fn.hoverPlugin = function(){
    var element = this;

    $(element).animate({"opacity" : ".5"});

    $(element).hover(function(){
        $(element).stop().animate({"opacity" : "1"});
    }, function() {
        $(element).stop().animate({"opacity" : ".5"});
    });
};
$(document).ready(function(){
    $("img").hoverPlugin();
});

http://jsfiddle.net/ww7gg/

如果你在console打开的情况下尝试，那么你会明白我的意思。

如果你改成这个：

$(element).hover(function(){
    $(this).stop().animate({"opacity" : "1"});
}, function() {
    $(this).stop().animate({"opacity" : ".5"});
});

http://jsfiddle.net/ww7gg/1/

有效。

这更好：

jQuery.fn.hoverPlugin = function(){
    this
        .animate({"opacity" : ".5"})
        .hover(function(){
            $(this).stop().animate({"opacity" : "1"});
        }, function() {
            $(this).stop().animate({"opacity" : ".5"});
        });
};

您不需要element，只需使用this和链。

http://jsfiddle.net/ww7gg/2/

Answer 2

在你的插件上：

var element = this;是一个jquery元素集合：

jQuery.fn.hoverPlugin = function(){
    var collection = this.animate({"opacity" : ".5"}); //Fade all elements to .5 opactiy.

    collection.each(function() {
        var element = this; // Single element from the collection
            $el = $(element); //Create 1 jquery object and re-use it on the events.

        $el
            .hover(function(){
                $el.stop().animate({"opacity" : "1"});
            }, function() {
                $el.stop().animate({"opacity" : ".5"});
            });
    });

};

Answer 3

jQuery.fn.hoverPlugin = function(){

    var element = this; //this is already wrapped as jquery object e.g it will refer to $("img") in your case

    element.animate({"opacity" : ".5"});


        element.hover(function(){
            element.stop(true,true).animate({"opacity" : "1"});
        }, function() {
            element.stop().animate({"opacity" : ".5"});
        });
};

并使用它

$("img").hoverPlugin();

在插件中理解“this”

3 个答案: