0

我对 jQuery 的掌握很薄弱，但我正在尝试学习向其中添加常规 Javascript 的基础知识。我想将一系列动画“保存”为一个函数，然后通过几个不同的点击事件调用该函数。解决此问题的最佳方法是什么？

jsFiddle - http://jsfiddle.net/kfycP/1/

简单的示例代码：

$(document).ready(function() {

function animateCube() {
    $('.test').fadeOut();
    $('.test').delay(500).slideDown();
}

$('.test').click(function() {
// Play "animateCube"
});

$('.link').click(function() {
// Play "animateCube"
});

});
4

6 回答 6

5

我会将函数分配给 avar并将其作为事件的单击处理程序引用。

$(document).ready(function() {

  var animateCube = function() {
    $('.test').fadeOut();
    $('.test').delay(500).slideDown();
  }

  $('.test').click(animateCube);

  $('.link').click(animateCube);

});

如果您想执行一些额外的代码，我会将处理程序包装在一个匿名函数中。

$('.test').click(function(){
  // execute more code
  animateCube();
  // execute even more code
});
于 2012-10-08T13:12:23.780 回答
2

您可以简单地调用该函数，如下所示：

$('.test').click(function() {
  animateCube();
});
于 2012-10-08T13:14:57.690 回答
1

您只需从单击处理程序中调用该函数。

$('.link').click(function() {
   animateCube();
});
于 2012-10-08T13:12:37.427 回答
1 
$('.test, .link').click(function() {
  animateCube();
});
于 2012-10-08T13:13:40.157 回答
1

由于您正试图掌握常规 JS，我认为对您来说最有趣的方法是使用命名回调：

$(document).ready(function()
{
    function animateCube(e)//can be declared outside ready CB, too
    {//jQuery passes the event object to the function
        $(this).fadeOut();//? fade only clicked element?
        $('.test').fadeOut();
        $('.test').delay(500).slideDown();
    }
    $('.link, .test').on('click',animateCube);
});

您需要知道的是函数是一等对象，并且可以作为参数传递给另一个函数，就像您在 jQuery ( .click(function<---) 中一直做的那样。这就是为什么写恕我直言没有意义.click(function() { anotherFunction();});。您正在动态创建一个辅助函数对象，将其传递给调用它的 jQuery，它所做的只是调用您希望看到执行的函数。事实上，函数是在特定的上下文 ( $(this)) 中调用的，而这正是您可能想要使用的上下文。在它周围包装一个虚拟函数并没有加起来。如果您想在给定函数中添加一些额外的东西，只需将它们视为它们的对象. 它们可以是参数，函数的返回值，它们可以具有属性，它们提供了一个原型（-链），它们甚至可以同时被多个变量引用......考虑一下：

$(document).ready(//<-- open bracket: this is a function call
    function(){});//we're creating a function AND pass it as an argument

所以，ready我们调用的方法可能看起来像这样（它看起来比这更复杂，但这不是重点）：

object.ready = function(functionArgument)
{
    //the function we passed looks like a variable now:
    console.log(typeof functionArgument);//"function"
    //ways this function can be called:
    functionArgument();
    functionArgument.call(this);//call in current context
    functionArgument.apply(object,[1,2,3]);//call as a method of object, and pass 3 arguments
    functionArgument.bind(window);//bind global context
    functionArgument();//call in bound context
};

函数在 JS 中是简洁的东西，而且，同样：它们也是对象，因此可以像任何其他对象一样为它们分配属性。在我们的示例中：

functionArgument.hasAProperty = functionArgument;
functionArgument = (function(originalFunction)//this was the original function
{
    return function()//<-- return a function, that will be assigned to our var
    {
         console.log('I used to be:');
         console.log(oringalFunction);
         console.log('Now I do even more! But did I loose my property?');
         console.log(typeof functionArgument.hasAproperty);//undefined
         console.log('Yes, but: ' + typeof originalFunction.hasAProperty + ' Not entirely!');
    };
})(functionArgument.hasAProperty);//passes a reference to itself

让我知道这对您是否有意义，这是未经测试的东西，但它遵循 IIFE 和闭包的基本原则。

于 2012-10-08T13:20:06.907 回答
0

试试这个：

$(document).ready(function() {
    function animateCube() {
        $('.test').fadeOut();
        $('.test').delay(500).slideDown();
    }
    $('.test').click(function() {
       // Play "animateCube"
    });
    $('.link').click(function() {
        $('.test').fadeOut().delay(500).slideDown();
    });
});
于 2012-10-08T13:16:09.973 回答