zoukankan html css js c++ java

使用jQuery的replaceWith()方法要注意的地方

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
div{
    100px;
    height:100px;
    background-color:#CCFFFF;
    border:#FF0000 solid 2px;
}
</style>
<script language="javascript" src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script language="javascript">
    // 用text()或html()实现
    // $(function(){
    //     $('div').eq(0).click(function(){
    //         $('div').eq(0).text("11");
    //         $('div').eq(1).text("");
    //     });
    //     $('div').eq(1).click(function(){
    //         $('div').eq(0).text("");
    //         $('div').eq(1).text("22");
    //     });
    // });


    //用replaceWith()实现
    function initClick(){
        $('div').eq(0).click(function(){
            $('div').eq(0).replaceWith('<div>11</div>');
            $('div').eq(1).replaceWith('<div></div>');
            initClick();
        });
        $('div').eq(1).click(function(){
            $('div').eq(0).replaceWith('<div></div>');
            $('div').eq(1).replaceWith('<div>22</div>');
            initClick();
        });
    }
    $(function(){
        $('div').eq(0).click(function(){
            $('div').eq(0).replaceWith('<div>11</div>');
            $('div').eq(1).replaceWith('<div></div>');
            initClick();
        });
        $('div').eq(1).click(function(){
            $('div').eq(0).replaceWith('<div></div>');
            $('div').eq(1).replaceWith('<div>22</div>');
            initClick();
        });
    });
</script>
</head>
 
<body>
<div></div>
<div></div>
</body>
</html>

查看全文

相关阅读:
vue2手写vuex
200.岛屿数量(DFS M-岛屿系列)
739.每日温度(栈M)
150.逆波兰表达式求值(栈M)
20.有效的括号(栈L)
前端性能优化与SEO优化整理
 Typescript:类型断言
 如何在浏览器中快速调试Typescript
Typescript：枚举
 Typescript:接口

原文地址：https://www.cnblogs.com/wuqilang/p/11864872.html