jquery中html、text、val回調函數
阿新 • • 發佈：2017-05-20
-1 下標 har round 觸發 charset 改變 方法 this
先掃盲：
摘自菜鳥教程：jQuery 方法：text()、html() 以及 val()擁有回調函數。
回調函數有兩個參數：被選元素列表中當前元素的下標，以及原始（舊的）值。然後以函數新值返回您希望使用的字符串
再上代碼：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <ul> <li>demo</li> <li>demo</li> <li>demo</li> <li>demo</li> </ul> </body> <script src="jquery-1.12.4.min.js"></script> <script> $("li").click(function () { $(this).html(function(i,originTex){ return (originTex+i); }) })</script> </html>
很奇怪，當點擊元素"li"時總是在舊文本後追加下標0，與預期不一樣。
再看接下來代碼：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <ul> <li>demo</li> <li>demo</li> <li>demo</li><li>demo</li> </ul> </body> <script src="jquery-1.12.4.min.js"></script> <script> // $("li").click(function () { // $(this).html(function(i,originTex){ // return (originTex+i); // }) // }) $(document).click(function(){ $("li").html(function(i,originTxt){ $(this).html(originTxt+i); }) }) </script> </html>
改變事件源，期待的結果出現了。
【代碼解析】
第一種情況觸發事件的是當前觸發點擊事件的li元素，$(this)指向它，只有一個元素，所以其下標一直是0；
第二種情況僅僅是通過document這個對象觸發事件，進而執行的是一個典型的遍歷賦值動作，這個不多做解釋。
jquery中html、text、val回調函數