은 코멘트를 확인

Question

는 기본적으로 toggleClass (기능 (N보고 this code의 실행)

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

Complete code is here

Answer 1

1. . 이는 일반적으로 페이지의 HTML 코드가 먼저로드되어 있어야한다는 것을 의미합니다 (반드시 이미지 일 필요는 없음). (Documentation for .ready)

2. 버튼을 클릭 할 때 실행되는 모든 요소에 함수가 바인딩됩니다. 2, 등등 처음 발견 한 listitem_1위한 listitem_0, 및 리턴 (jQuery 및 .click 대한 설명서) 페이지의 각 요소에 대해 li

3. 이 함수가 호출된다. toggleClass은 이미 명명 된 클래스가 이미있는 경우 요소에서 해당 클래스를 제거하지만 이미없는 경우에는 추가합니다.

따라서 버튼은 시각적으로 다른 두 가지 모양 (페이지의 CSS 코드로 정의 됨) 사이에서 목록 항목을 전환하는 "토글 스위치"역할을합니다.

Answer 2

에 무슨 일을 통해 저를 실행하십시오 jQuery 코드 설명

// 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 파라미터는 노드 목록 엘리먼트의 인덱스이고, 상기 제 1 요소는 "listitem_0" 클래스를 가질 것 등 ...

Answer 4

아이디 "버튼"과 소자 을 클릭하면 listitem_ [0-9] 클래스는 li 클래스에서 이미 추가되었거나 삭제 된 클래스에 따라 li 요소에 추가되거나 제거됩니다.

모든 HTML 요소가 안정적 페이지에있는 요소를 찾을 필요가있다 DOM에서 접근 할 때까지 기다립니다

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