Kann einige dieser jQuery-Code bitte erklären? [Duplikat]

Question

  

Mögliche Duplizieren:
   Kann jemand erklären dieses jQuery-Code?

Ich habe dies vor geschrieben, aber ich möchte meine Frage verfeinern (und ich kann nicht scheinen, um es in dem alten Thread zu tun).

Der Code lautet:

$(document).ready(function()
    {
            var rot=$('#image3').rotate({maxAngle:25,minAngle:-55,
            bind:
                    [
                            {"mouseover":function(){rot[0].rotateAnimation(85);}},
                            {"mouseout":function(){rot[0].rotateAnimation(-35);}}
                    ]
            });
    });

Es ist von hier genommen: http://wilq32.googlepages.com/wilq32.rollimage222, und es gibt eine Demo der Funktionalität auch dort (eine Bilddrehung animieren - die dritte Demo auf der Seite).

Was ich brauche, erklärt:

1. Ich verstehe, dass es eine Variable deklariert werden - " rot ", aber ich kann nicht zu verstehen scheinen, wo die Erklärung endet ....

2. Wenn die Variable verwendet wird, wird es verwendet als rot [0] , was bedeutet [0] steht für? dies ist ein Array?

3. Ich habe noch nie gesehen bind wie das verwendet, die ursprüngliche Syntax

   .

   $ ( "Selektor") bindet (Typ, [Daten], fn);

Was ist los, dann? Was sind alle Kommas und [] über

4. Was würde Ich mag schließlich tun, ist, verwenden Sie dieses Skript zu drehen Bild „X“, während „Y“ Element geklickt wird. Wie kann dies geschehen (vorzugsweise ohne "bind")?

Danke!

Answer 1

Ich denke, die grundlegenden syntaktischen Probleme wurden auch von anderen hier recht gut ...

erläutert

In Bezug auf:

  

Was würde Ich mag schließlich tun, ist   Verwenden Sie dieses Skript zu drehen Bild „X“,   während „Y“ Element angeklickt wird.   Wie kann diese (vorzugsweise erfolgen   ohne "bind")?

Versuchen Sie diese:

var x=$("#imagex"); //<-- image to be rotated
var y=$("#elemy"); //<-- element to be clicked
var angleOfRotation=45; //<-- angle of rotation

y.bind("click",function(){
  x[0].rotateAnimation(angleOfRotation);
});

Answer 2

Erklärung endet am 2. zum letzten Semikolon. Die Referenz wird gefangen genommen und wird viel später verwendet werden, die während der Ausführung der Callback-Funktionen übergeben.

rot ist ein jQuery-Objekt, das kein Array ist, aber wie ein indexiert werden.

rot[0] ist das erste DOM-Objekt, das die Wähler #image3 einstimmt, das heißt das Objekt mit ID image3.

bind, in diesem Fall ist nicht die Funktion binden, sondern ein Teil der zu drehen gebenen Optionen.

Eckige Klammern [foo, bar] eine wörtliche Anordnung von foo und bar anzeigen. Geschweiften Klammern {foo: "foo", Bar: "bar"} sind ein wörtliches Objekt mit Eigenschaften, foo und bar

.

Answer 3

1. Die Erklärung endet am ersten Semikolon. rot ist der Wert, rotate() Erträge zugeordnet (die in diesem Fall das gleiche wie das Ergebnis von $('#image3') ist aufgrund jQuery Methode Verkettungs Syntax ). Alles zwischen rotate( und dem nächsten ) nur Argumente rotate() übergeben.

2. Ja, [0] ist Array-Zugriff. rot[0] bezieht sich auf das erste ( "0-te") Element in dem Array rot.

3. Hier { maxAngle:25, minAngle:-55, bind: ... } ist ein "Objekt wörtliche", das heißt Syntax für ein Objekt, das die Eigenschaften maxAngle, minAngle und bind hat. Wenn Sie das Objekt einer Variablen zugewiesen myObject (statt nur als Argument zu drehen vorbei ()), könnten Sie dann Zugriff auf seine Eigenschaften wie myObject.maxAngle, myObject.minAngle und myObject.bind. In diesem Fall bind ist keine Funktion, es ist nur der Name einer Eigenschaft auf dem Objekt.

Answer 4

Ok, das fehlende Stück - das ist, wie Sie den obigen Code zu Trigger-Rotation durch ein anderes Element verwendet werden:

var itemYouWannaRotate = $("#imageToRotate").rotate(0);
$("#TriggerElement").click(function(){
    itemYouWannaRotate[0].rotateAnimation(90);
});

Danke Jungs, alle Ihre Antworten waren eine große Hilfe.