面向对象第一次伟大尝试（失败）

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<ul id=ct>
  <li class = list id='list1'>珠宝玉器<span>></span></li>
  <li class = list id='list2'>珠宝玉器<span>></span</li>
  <li class = list id='list3'>珠宝玉器<span>></span</li>
  <li class = list id='list4'>珠宝玉器<span>></span</li>
  <li class = list id='list5'>珠宝玉器<span>></span</li>
</ul>
</body>
</html>

*{padding :0;margin:0;font-family:微软雅黑,Arial; }
li{list-style: none}
#ct{
  margin : 10px;
  max-width : 15em;
  background: #e12;
  
}
.list{
  position:relative;
  font-size:1.1em;
  color:#fff;
  margin:0 0.5em;
  padding:0.5em 0.5em;
  border-top:0.2px dotted rgba(200,200,200,0.5) ;
  cursor : pointer;
  vertical-align: middle; 
}
.list:first-child{border:0}
.list>span{
  position:relative;
  left:6em;
  font-size : 1.2em;
}
.list2{
  position:absolute;
  left:15em;
  border:1px solid;
}

  this.seats = seats
  this.prepareHtml()
  this.mount()
  this.close()
}


 items.prototype.prepareHtml = function(){
  var {seat1,seat2,seat3,seat4}= this.seats
  var div = this.div =document.createElement('div')
  div.className = 'list2'
  var html =`
      <div>${seat1}</div><div>${seat2}</div>
      <div>${seat3}</div><div>${seat4}</div>
` 
   div.innerHTML = html

  
   }
 items.prototype.mount = function(){
   $('#ct').append(this.div)
}
 items.prototype.close = function(){
  var xxx = this.div
  $('.list').mouseleave(function(){ xxx.remove()})

}




 $('.list').mouseenter(function(){
  var secondList = new items({
    seat1 : '翡翠',
    seat2 : '玉石',
    seat3 : '宝石',
    seat4 : '水晶',
    seat5 : '玛瑙',
    seat6 : '珍珠'
  })
  

 })

最后编辑于：2017.12.06 06:55:15

面向对象第一次伟大尝试（失败）

推荐阅读更多精彩内容