toggle 方法的使用

Posted 2020-11-20 quietxin

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了toggle 方法的使用相关的知识，希望对你有一定的参考价值。

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

注：toggle() 方法在 jQuery 版本 1.8 中被废弃，在版本 1.9 中被移除。

以上是关于toggle 方法的使用的主要内容，如果未能解决你的问题，请参考以下文章