zoukankan      html  css  js  c++  java
  • 利用键值对来找对应值的信息

    css

      .modeWin{ 300px;height: 200px;border: 1px solid #000;margin-bottom:30px;}
    .contant div{
         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);
          }
  • 相关阅读:
    ORM&MySQL
    Python的内存管理机制
    Docker
    MySQL数据库优化
    Django&Flask区别
    Nginx
    JWT
    云接入特别说明
    gogs私有代码库上传项目
    Authentication failed (rejected by the remote node), please check the Erlang cookie
  • 原文地址:https://www.cnblogs.com/Model-Zachary/p/7053778.html
Copyright © 2011-2022 走看看