Question

所以我刚刚开始制作一个网页进行更改，我想动画一些按钮等等。所以我想要做的是编写一个函数，它接受一个对象（在本例中是一个）并为hover-event声明函数。该函数在这个（不实用的）版本中完全正常工作：

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

但是为了在多个按钮上使用该函数，我想这样写：

    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();

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

1 个答案: