解釋jQuery代碼

Question

請運行我通過對this code執行基本上看toggleClass（函數（N）

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

Complete code is here

Answer 1

1. 它等待，直到所有的HTML元素是從DOM，這是需要可靠地發現，在頁面上的元素進行訪問。這通常意味着頁面的HTML代碼首先必須加載（但不一定是圖像）。 （Documentation for .ready）

2. 的功能被綁定到該按鈕被點擊時運行所有button元素。 （文檔爲jQuery.click和）

3. 對於頁面中的每個li元件，一個函數被調用，該函數返回listitem_0爲第一個發現，listitem_1用於第二，等等。 toggleClass將從該元素中移除該已命名的類，如果它已經具有該元素，但是如果它尚未擁有它，則會添加它。

因此，該按鈕充當了「切換開關」，它很可能在兩個視覺上不同的外觀（由頁面的CSS代碼定義）之間切換列表項。

Answer 2

發生了什麼檢查意見

// 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

那麼，從提供給toggleClass的函數返回的類將在不存在時添加，如果它存在，則將其刪除。

的n參數是在節點列表中的元素的索引，所以第一個元件將具有"listitem_0"類等等...

Answer 4

與ID「按鈕」的元素被點擊時 這個類listitem_ [0-9]被添加或從任何li元素中刪除，取決於它是否已經擁有該類。

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