toggle 方法的使用

最新推荐文章于 2023-07-08 18:23:00 发布

weixin_30457881

最新推荐文章于 2023-07-08 18:23:00 发布

阅读量688

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/quietxin/p/9242619.html

版权

<!DOCTYPE html>
<html>
<head>
    <title></title>
<style type="text/css">
.tp-user-biming {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.tp-user-biming .fds {
    padding-right: .25rem;
}
.tp-user-biming input {
    height: 25px;
    outline: none;
    border: 1px solid #e5e0e0;
    box-sizing: border-box;
    width: 35%;
    background: #f6f5f5;
    padding: 0 .25rem;
    margin-right: .25rem;
}
.icon-biming {
    height: 20px;
    width: 20px;
    background: url(../img/f5.png) no-repeat;
    margin: 2px 0;
    display: block;
}
</style>
    <script src="jquery.js"></script>
</head>
<body>
<div class="tp-user-biming">
    <span id="biming"></span>
    <i class="icon-biming" id="icon-biming"></i>
</div>

<script>
    $(document).ready(function(){
        
        $(".icon-biming").toggle(
        function() {
            var bm = $('#biming');
            var str = bm.text();
            bm.replaceWith("<input type='text' placeholder='笔名' id='inputValue' value='"+str+"' />");               
        },
        function() {
            var iValue = $('#inputValue');
            var istr = iValue.val();
            iValue.replaceWith("<span id='biming' class='fds'>"+istr+"</span>");
        }
      );
    });
</script>
</body>
</html>