首页 > 代码库 > jquery中html、text、val回调函数

jquery中html、text、val回调函数

2024-09-23 18:36:13   209人阅读

先扫盲：

　　摘自菜鸟教程：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回调函数


联系
我们