码迷,mamicode.com
首页 > 其他好文 > 详细

toggle 方法的使用

时间:2018-06-29 14:17:13      阅读:297      评论:0      收藏:0      [点我收藏+]

标签:val   IV   code   function   移除   display   ext   input   .text   

<!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 方法的使用

标签:val   IV   code   function   移除   display   ext   input   .text   

原文地址:https://www.cnblogs.com/quietxin/p/9242619.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!