function Lift(num){
this.num = num;
console.log('我是' + num + '号电梯');
}
Lift.prototype = {
constructor: Lift,
list: {
floors:[]
},
currpos: $('.active').data('floor'),
buildLift: function(floornum, num){
var wrap = $('.lift');
//判断是否将已生成的电梯置空,否则电梯会多出很多
$('.lift-box').length >= num ? wrap.html('') : '';
//生成电梯样式
wrap.prepend('<div class="lift-box '+ num +'" ></div>');
var list = $('.'+ num +'')
for(let i = 1; i <= floornum; i++){
list.prepend(function(){
if(i == 1){
return '<div class="box active" class="active" data-floor='+ i +'></div>'
} else {
return '<div class="box" data-floor='+ i +'></div>'
}
});
}
},
goto: function(floornum,controller){
//绑定this对象
var $this = this;
//为按钮添加状态
//将要去的楼层保存到list数组中
this.list.floors.push(floornum);
//获取当前电梯的位置
var currpos = $('.active').data('floor');
//获取所有电梯数量
var allbox = $('.box');
var _allbox = [];
//因为移动方向总是上下相反,将数组内容倒置一下
for (let i = allbox.length; i > 0; i--){
var j = Math.abs(i - allbox.length);
_allbox[i] = allbox[j];
}
setTimeout(function show(){
//电梯运行时去掉电梯的颜色
allbox.removeClass('active');
//找到要修改的电梯的颜色
var currbox=_allbox[currpos];
$(currbox).addClass('active');
//去掉控制按钮状态
currpos == floornum ? $('#'+controller.id+'.'+controller.classList[0]).removeClass('arrow-active') : ''
if(currpos < $this.list.floors[$this.list.floors.length - 1]){
currpos++;
}else if(currpos > $this.list.floors[$this.list.floors.length - 1]){
currpos--;
}
setTimeout(show,300);
},300)
return true
}
}
function lift_controller(controller){
//添加控制按钮状态
$('#'+controller.id+'.'+controller.className).addClass('arrow-active');
console.log(lift1.currpos);
// console.log(lift1);
lift1.goto(controller.id)
}
//界面有选择几部电梯和电梯层数的按钮
$('.confirm').on('click' ,function(){
//TODO不能为小数和0
let floornum = $('.floornum').val();//层数
let liftnum = $('.liftnum').val();//电梯数量
//根据用户要求生成n部电梯
for (let i = 1; i <= liftnum; i++){
lift = 'lift' + i;
new Lift(i).buildLift(floornum, i);
}
});
在写的过程中遇到几个问题,一直没想明白,请高手指点指点
1.想通过for循环去创建电梯实例,这样通过buildLift()方法就可以在界面生成电梯样式了,但是电梯实例的变量lift出click方法后,变量名不能用了
2.通过lift_controller()方法,去控制这几部电梯去运行,例如想通过lift1.goto()去调用,但是发现无论是执行lift1.goto()还是lift2.goto(),都是第一部电梯在执行。
3.Lift的属性值currpos: $('.active').data('floor'),是想计算每部电梯的当前电梯所在楼层,但是为什么$('.active').data('floor')没有执行呢?