2011-01-09 15 views
-1
$(".refine_button").click(function(){ 
var butt = $(this); 
$(this).next(".refine_block").slideToggle("normal", function(){ 
     butt.children(".refine_icon").toggleClass("opened"); 
     }); 
}); 

Insbesondere die butt.children 'Was bedeutet dieser Code in schlichtem Englisch?

Dank

+0

Hier ist ein Hinweis: Zwei Zeilen vor 'butt.children', gibt es eine Linie ist, die' var Po = 'beginnt. –

+0

Was ist der Kontext? –

+1

Ich meine es ernst! Ich konnte nichts über Google finden, was butt.children tat, aber wenn ich es entfernte, funktionierte mein Code nicht richtig. Bei jedem .refine_icon Element auf der Seite wurde die Klasse "opened" aktiviert, wenn nur ein .refine_button angeklickt wurde. – Anthony

Antwort

2
$(".refine_button").click(function(){ // when an element with the class refine_button is clicked 
    var butt = $(this); // store a reference to the element clicked 
    $(this).next(".refine_block") // get the next element if it has a class refine_block 
     .slideToggle("normal", function(){ // and slide it open or closed, depending on its current status 
      // when that animation is finished 
      butt.children(".refine_icon") // get any children of the original clicked element that have the class refine_icon 
       .toggleClass("opened"); // and add or remove the class opened, depending whether they currently have it 
     }); 
}); 
+0

Danke, tolle, klare Erklärung – Anthony

2

Jede Taste mit der Klasse der „refine_button“, die angeklickt wird, wird das Element mit einer Klasse von „refine_block“ und entweder „slide“ finden es hinein oder heraus (abhängig davon, ob es schon ein- oder ausgeht, wird es das Gegenteil nennen). Wenn die Folie fertig ist, fügt sie dem "refine_icon" -Element innerhalb des betroffenen "refine_block" namens "opened" eine Klasse hinzu. Dies betrifft nur das nächste Element im Code, das direkt neben dem ursprünglichen "refine_button" angeklickt ist.

+0

Beachten Sie, dass die Funktion '" refine_block "', nicht '" .refine_button "' verwendet. –

+0

Beachten Sie, dass 'next' nicht nach' .refine_button', sondern '.refine_block' sucht. –

+0

@Anon @Jakub Hampl - Danke, dass Sie den Tippfehler bemerkt haben. Fest. –

0

butt ist eine Variable, die ein jQuery-Objekt enthält. die enthält ein einzelnes Element (das Element mit einer Klasse von refine-button die geklickt wurde.

Die children Funktion gibt die Kinder der Elemente innerhalb eines jQuery-Objekts, das gegebenenfalls durch einen Selektor gefiltert, so dass Sie das Abrufen der Kinder der clicked element, die die Klasse 'refine-icon' haben (und im übrigen die Klasse 'open').

0

Wenn Sie auf ein Element klicken, für das die Klasse "refine_button" angewendet wurde, findet jQuery das Das nächste Element auf der Seite, auf das die Klasse "refine_block" angewendet wird, und es entweder reduzieren oder erweitern (über die slideToggle-Methode). Sobald das slideToggle abgeschlossen ist, fügt es entweder die Klasse "opened" für alle "refine_icon" -Elemente hinzu oder entfernt sie sind innerhalb der "re fine_block ".

0

Points of Interest: - sogar div oder Bild

  1. Es wird mit Klasse refine_button, nicht nur Taste auf ein beliebiges Element anwenden. Wenn ein Hund "Kitty" heißt, ist es immer noch ein Hund.
  2. children wird nur die direkten Kind Elemente der Eltern, keine tiefe finden.
  3. Die butt wird deklariert, um das übergeordnete Element zu erhalten, da $(this) unterschiedliche Bedeutung innerhalb der slideToggle-Funktion erhalten wird.