den jQuery-Code

Question

Bitte führen Sie mich durch, was passiert, auf die Ausführung von this code Grundsätzlich betrachten toggleClass (function (n)

$(document).ready(function(){ 
     $("button").click(function(){ 
     $("li").toggleClass(function(n){ 
      return "listitem_" + n; 
     }); 
     }); 

Complete code is here

Answer 1

1. Es wartet, bis alle HTML-Elemente aus dem DOM zugänglich sind, die zuverlässig notwendig ist, um die Elemente zu finden, die auf der Seite sind. Das bedeutet normalerweise, dass der HTML-Code der Seiten zuerst geladen sein muss (aber nicht unbedingt die Bilder). (Documentation for .ready)

2. Eine Funktion ist an alle button Elemente gebunden, die ausgeführt werden, wenn auf die Schaltfläche geklickt wird. (Dokumentation für jQuery und .click)

3. Für jedes li Element in der Seite, eine Funktion aufgerufen wird, die gefunden listitem_0 für die erste zurückkehrt, listitem_1 für das zweite, und so weiter. toggleClass wird diese benannte Klasse aus dem Element entfernen, wenn sie bereits vorhanden ist, aber wenn sie nicht bereits vorhanden ist, wird sie hinzugefügt.

daher die Taste fungiert als „Kippschalter“, die am wahrscheinlichsten schalten die Listenelemente zwischen zwei visuell unterschiedlichen Erscheinungen (von der Seite der CSS-Code definiert).

Answer 2

Überprüfen Sie die Kommentare

// when dom is loaded 
$(document).ready(function(){ 
    // on somebody clicks a button element 
    $("button").click(function(){ 
     // change the class of li elements in the page 
     $("li").toggleClass(function(n){ 
      // with a value depending on the number of li element in 
      // the array of li elements 
      return "listitem_" + n; 
     }); 
    }); 

Answer 3

Nun, die Klasse, die von der Funktion toggleClass zurückgegeben wird, wird hinzugefügt, wenn sie nicht existiert, und entfernt, wenn sie existiert.

Der n Parameter ist der Index des Elements in der Knotenliste, so dass das erste Element würde eine Klasse von "listitem_0" hat und so weiter ...

Answer 4

, wenn das Element mit der ID „Taste“ wird geklickt Die Klasse listitem_ [0-9] wird hinzugefügt oder entfernt von einem beliebigen li-Element, abhängig davon, ob sie diese Klasse bereits besitzt oder nicht.

Answer 5

$(document).ready(function(){ // document load, ready to execute code 
     $("button").click(function(){ // when all html elements that have a tag named 'button' is clicked 
     $("li").toggleClass(function(n){ // change the class of all li elements in the page to the "listitem_" + the number of li elements on the page 
      return "listitem_" + n; 
     }); 
     });