jquery中html、text、val回調函數

時間 2019-11-21

標籤 jquery html text val 函數欄目 JQuery 简体版

原文原文鏈接

先掃盲：html

　　摘自菜鳥教程：jQuery 方法：text()、html() 以及 val()擁有回調函數。jquery

回調函數有兩個參數：被選元素列表中當前元素的下標，以及原始（舊的）值。而後以函數新值返回您但願使用的字符串函數

再上代碼：this

<!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，與預期不同。spa

再看接下來代碼：code

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