JS 和 JQuery，将参数传递给函数

Question

所以我刚开始制作一个网页以进行更改，我想为一些按钮设置动画等等。所以我想做的是编写一个函数，它接受一个对象（在这种情况下是一个）并为悬停事件声明函数。该功能在此（无用）版本中完全正常：

    function hoverOver() {
        $(document).ready(function(){
            $("#FormA").hover(function(){
                $("#ButtonA").animate({marginLeft:"5px", opacity:"1"}, "fast");
            }, function(){
                $("#ButtonA").animate({marginLeft:"0px", opacity:"0.5"}, "fast");
            });
        });

但是为了在多个Button上使用该功能，我想这样写：

    function hoverOver(source) {    
        $(document).ready(function(){
            source.parent().hover(function(){
                source.animate({marginLeft:"5px", opacity:"1"}, "fast");
            }, function(){
                source.animate({marginLeft:"0px", opacity:"0.5"}, "fast");
            });
        });
    }
    // this is how I want to call the function with multiple Buttons
    hoverOver($("#ButtonA"));

我还坚持认为，如果我通过所有这样的函数传递源变量，它会起作用：

    function hoverOver(source) {
        $(document).ready(function(source){ //  <-- here
            source.parent().hover(function(source){ //  <-- here
                source.animate({marginLeft:"5px", opacity:"1"}, "fast");
            }, function(source){ // <-- and here
                source.animate({marginLeft:"0px", opacity:"0.5"}, "fast");
            });
        });
    }
    // this is how I want to call the function with multiple Buttons
    hoverOver($("#ButtonA"));

那么我的问题在哪里？我知道这种 JS 编码方式不是最好的方式，特别是 JS、HTML 和 CSS 有数百万种方法可以做到，但我真的是 4 天前开始的。 ;)

谢谢

Answer 1

如果你使用 jQuery，你不妨扩展它的原型，像这样：

$.fn.hoverOver = function(){
    this.each(function(){
        var $this = $(this);
        $this.parent().hover(function(){
             $this.animate({marginLeft:"5px", opacity:"1"}, "fast"); 
        }, function(){
             $this.animate({marginLeft:"0", opacity:"0.5"}, "fast"); 
        });
    });
}

然后像这样绑定到任意元素上；

$("#buttonA").hoverOver();

或者这个：

$(".buttonHover").hoverOver();