                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /DatePicker组件开发

为什么我的代码第一次可以渲染本地的时间出来，当我点击上个月和下个月的按钮时？

我点击按钮后，在控制台输出了HTML是正确的，但是，在页面的显示还是停留在第一次渲染的界面，不知道怎么回事？其他代码和老师的一模一样，我把我的render发上来

	datepicker.render = function(direction){
		var year,month;
		if(monthDate){
		 year = monthDate.year;
		 month = monthDate.month;}
		if(direction === 'prev') month--;

		if(direction ===  'next') month++;
		// console.log(month);
			var html = datepicker.buildUi(year,month);
		// document.body.innerHTML = html;
			// $wrapper = document.querySelector('ui-datapicker-wrapper')
			// if(!$wrapper){
		   		$wrapper = document.createElement('div');
				
				$wrapper.className = 'ui-datapicker-wrapper';
			// }
				$wrapper.innerHTML = html;document.body.appendChild($wrapper);
				console.log(html);

	}

qq_天天_66

2017-08-27

源自：DatePicker组件开发 5-2

关注问题我要回答

1576

操作

收起

3 回答

一树青枫
2017-09-08

chrome 里查看页面元素，可以看到，没点击一次按钮，就创建一个wrapper，但后来创建的在init创建的下层，因此看起来数据是更新了，但页面展示却还是init的情况。所以，楼上真的很厉害，在你的解答里，我才知道，判断wrapper是否存在是非常重要的。当容器存在才时候，就只是更新内部的HTML即可。

0 回复有任何疑惑可以回复我~

收起回答

慕运维603224
2017-08-29

写成这样就行了：

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) {
   $wrapper = document.createElement('div');
   $wrapper.className = 'ui-datepicker-wrapper';
   document.body.appendChild($wrapper);
  }
  $wrapper.innerHTML = html;
}