利用键值对来找对应值的信息

css

复制代码
  .modeWin{width: 300px;height: 200px;border: 1px solid #000;margin-bottom:30px;}
.contant div{
    width: 300px;height: 200px;
    font-size: 16px;color:pink;
    border: 1px solid #000;
}
.contant div p{cursor:pointer;}

.btnshow{position:absolute;right:20px;top:20px;}

p{cursor:pointer;}
复制代码

html

复制代码
 <div class="modeWin">
                
            </div>

            <div class="contant">
                          <button class="btnJia" style="margin-bottom:10px;">+</button>
                   <div style="position:relative;">
                        <button onclick="btnjian(this)" class="btnshow" style="display:none">减去</button>
                         <p>我是第一个盒子</p>
                   </div>

                   <div style="position:relative;top:20px;">
                     <button onclick="btnjian(this)" class="btnshow"  style="display:none">减去</button>
                         <p>我是第二个盒子</p>
                   </div>
 </div>
复制代码

javascript

复制代码
 $('.btnJia').click(function(event) {
            $('.btnshow').show(300);
           
        });
var container = {}; //用这个键值对存储元素对应的此时父元素的值,一个对应关系
        function btnjian(self){
           var parentElemt = $(self).parent().html();
           var childP = $(self).parent().children('P').text();
           $(self).parent().hide(400);
           
           var flag = new Date().getTime();

           var pElemt = $('<p flag='+flag+' onclick="childp(this)">'+childP+'</p>');

          
           $('.modeWin').append(pElemt);
            container[flag] = parentElemt;
        }
     
      function childp(self){
        // alert()
        var flag = $(self).attr('flag');
        var box = $('<div style=position:relative;top:10px;bottom:10px;>');
        // console.log(container[flag])
        box.append(container[flag])
        $('.contant').append(box);
      }
复制代码

 

posted @   xuanPhoto  阅读(259)  评论(0编辑  收藏  举报
编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 记一次.NET内存居高不下排查解决与启示
点击右上角即可分享
微信分享提示