我按照课程Datapicker组件开发，一行一行的敲代码。其中第五章节的第二小节，我再加入一个addEventListener的时候，浏览器报错。报错在第95行，但是在80行同样有addEventListener，却没有报错。(function(){
var datepicker = window.datepicker;
var monthData;
var $wrapper;
datepicker.buildUi = function(year, month){
monthData = datepicker.getMonthData(year, month);
var html = '<div class="ui-datepicker-header">'+
'<a href="#" class="ui-datepicker-btn ui-datepicker-prev-btn"><</a>'+
'<a href="#" class="ui-datepicker-btn ui-datepicker-next-btn">></a>'+
'<span class="ui-datepicker-curr-month">' + monthData.year + '-' + monthData.month + '</span>'+
'</div>'+
'<div class="ui-datepicker-body">'+
'<table>'+
'<thead>'+
'<tr>'+
'<th>一</th>'+
'<th>二</th>'+
'<th>三</th>'+
'<th>四</th>'+
'<th>五</th>'+
'<th>六</th>'+
'<th>日</th>'+
'</tr>'+
'</thead>'+
'<tbody>';
for(var i = 0 ;i<monthData.days.length; i++){
var date = monthData.days[i];
if (i%7 === 0) {
html += '<tr>';
}
html += '<td>' + date.showDate + '</td>'
if(i&7 === 6){
html += '</tr>'
}
}
html+= '</tbody>'+
'</table>'+
'</div>';
return html;
};
datepicker.render = function(direction){
var year,month;
if(monthData){
year = monthData.year;
month = monthData.month;
}
if(direction === 'prev') month--;
if(direction === 'next') month++;
var html = datepicker.buildUi(year, month);
if (!$wrapper) {
var $wrapper = document.createElement('div');
$wrapper.className = 'ui-datepicker-wrapper';
document.body.appendChild($wrapper);
}
$wrapper.innerHTML = html;
}
datepicker.init = function(input){
datepicker.render();
var $input = document.querySelector(input);
var isOpen = false;
$input.addEventListener('click',function(){
if(isOpen){
$wrapper.classList.remove('ui-datepicker-wrapper-show');
isOpen = false;
}else{
$wrapper.classList.add('ui-datepicker-wrapper-show');
var left = $input.offsetLeft;
var top = $input.offsetTop;
var height = $input.offsetHeight;
$wrapper.style.top = top + height + 2 + 'px';
$wrapper.style.left = left + 'px';
isOpen = true;
}
},false);
$wrapper.addEventListener('click', function(e){
var $target = e.target;
if(!$target.classList.contains('ui-datepicker-btn')) return ;
if($target.classList.contains('ui-datepicker-prev-btn')){
datepicker.render('prev');
}else if($target.classList.contains('ui-datepicker-next-btn')){
datepicker.render('next');
}
}, false);
};
})();以上是我的源码，虽然有些长。希望大大指教我一下...
1 回答
已采纳
千秋此意
TA贡献158条经验 获得超187个赞
你这代码好像没上完。。没看过那个课程，你看看是不是你上面贴的代码第67行： var $wrapper = document.createElement('div'); 这一句的锅，去掉 var 关键词试试：
$wrapper = document.createElement('div');
添加回答
举报
0/150
提交
取消