オブジェクト向けの最初の偉大な試み(失敗)
1780 ワード
JS Bin
- >
- >
- >
- >
- >
*{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 =`
${seat1}${seat2}
${seat3}${seat4}
`
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 : ' '
})
})