zoukankan      html  css  js  c++  java
  • 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 中被移除。

  • 相关阅读:
    Rafy 框架
    巧用拦截器:高效的扩展点设计
    Rafy 框架
    Rafy 框架
    Rafy 框架
    Rafy 框架-发布网页版用户手册
    Rafy 领域实体框架
    基金投资方法札记
    股票、基金投资方案总结
    BaaS API 设计规范
  • 原文地址:https://www.cnblogs.com/quietxin/p/9242619.html
Copyright © 2011-2022 走看看