Ich habe jQuery nur schwer im Griff, versuche aber, die Grundlagen des Hinzufügens von regulärem Javascript zu erlernen. Ich möchte eine Folge von Animationen als Funktion 'speichern' und diese Funktion dann über mehrere verschiedene Klickereignisse aufrufen. Was ist der beste Weg, um dies zu erreichen?

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

Einfacher Beispielcode:

$(document).ready(function() {

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

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

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

});
0
kthornbloom 8 Okt. 2012 im 17:10

6 Antworten

Beste Antwort

Ich würde die Funktion einem var zuweisen und sie als Klick-Handler für Ihre Ereignisse referenzieren.

$(document).ready(function() {

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

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

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

});

Wenn Sie zusätzlichen Code ausführen möchten, würde ich den Handler in eine anonyme Funktion einschließen.

$('.test').click(function(){
  // execute more code
  animateCube();
  // execute even more code
});
5
Kyle 8 Okt. 2012 im 13:12

Versuche dies:

$(document).ready(function() {
    function animateCube() {
        $('.test').fadeOut();
        $('.test').delay(500).slideDown();
    }
    $('.test').click(function() {
       // Play "animateCube"
    });
    $('.link').click(function() {
        $('.test').fadeOut().delay(500).slideDown();
    });
});
0
Chase 8 Okt. 2012 im 13:19

Da Sie versuchen, reguläres JS in den Griff zu bekommen, ist es meiner Meinung nach am interessantesten, einen benannten Rückruf zu verwenden:

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

Was Sie wissen müssen, ist, dass Funktionen erstklassige Objekte sind und als Argumente an eine andere Funktion übergeben werden können, wie Sie es die ganze Zeit in jQuery tun (.click(function <---). Deshalb ist es nicht wirklich sinnvoll, .click(function() { anotherFunction();}); IMHO zu schreiben. Sie erstellen ein sekundäres Funktionsobjekt im laufenden Betrieb, übergeben es an jQuery, wo es aufgerufen wird, und rufen lediglich die Funktion auf, die ausgeführt werden soll. Tatsächlich werden Funktionen in einem bestimmten Kontext ($(this)) aufgerufen, und dieser Kontext möchten Sie möglicherweise verwenden. Das Umwickeln einer Dummy-Funktion summiert sich einfach nicht. Wenn Sie möchten, dass einer bestimmten Funktion zusätzliche Elemente hinzugefügt werden, behandeln Sie sie einfach als die Objekte, die sie sind. Sie können Argumente sein, der Rückgabewert von Funktionen, sie können Eigenschaften haben, sie haben einen Prototyp (-chain) angegeben, sie können sogar von mehreren Variablen gleichzeitig referenziert werden ... Beachten Sie Folgendes:

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

Die von uns aufgerufene ready -Methode könnte also so aussehen (sie sieht etwas komplexer aus, aber das ist nicht der Punkt):

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
};

Funktionen sind in JS eine nette Sache, und wieder: Sie sind auch Objekte, sodass ihnen wie jedem anderen Objekt Eigenschaften zugewiesen werden können. In unserem Beispiel:

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

Lassen Sie mich wissen, ob dies für Sie Sinn macht. Es ist ungetestetes Zeug, aber es folgt den Grundprinzipien von IIFE und Verschlüssen.

1
Elias Van Ootegem 8 Okt. 2012 im 13:36

Sie rufen die Funktion einfach über den Click-Handler auf.

$('.link').click(function() {
   animateCube();
});
1
Daniel A. White 8 Okt. 2012 im 13:12

Sie können die Funktion einfach wie folgt aufrufen:

$('.test').click(function() {
  animateCube();
});
2
Michał Rakowski 8 Okt. 2012 im 13:14
$('.test, .link').click(function() {
  animateCube();
});
1
RRikesh 8 Okt. 2012 im 13:13