web前台工作笔记1

1、添加图片遇到的问题：（不要一味按照效果图来做，根据更好的想法来做）：新修订的效果做出来发现有问题：(本来想传个图，结果mac机截图工具截下的图格式不识别)

大概的布局就是：左侧是一个提示文本（上传图片：）右侧区域是有一个添加按钮和删除按钮来控制图片位的添加和删除（图片位在添加删除按钮的下面动态增减，右侧的按钮和图片位是一个大的div，并且给宽度一个百分比的大小）

<div class="eachitem_input_div">
		<div class="prompt_txt">上传图片：</div>
		<div style="float:left;width:80%;">
			<div class="option_ctr_add background-col-org btnz">+</div>
			<div class="option_ctr_minus btnz">-</div>
			<div class="add_remove_img">
			</div>
		</div>
		<input type="file" id="file_ns" name="upload"
			οnchange="nsUploadFile(this);" style="display: none;">
</div>

add_remove_img即是要动态添加图片的部分。

由于要再下方添加图片，而两个按钮的布局中都有float:left属性，如果默认的图片样式添加了float，那么就无法换行，但是不加float图片就会都换行，而不是排成一排。于是乎菜鸟乱用方法：

/*添加和删除图片位*/
$('.option_ctr_add').on('click',function(){
	if($('.add_remove_img').children().length==0){
		$('.add_remove_img').append(
				'<br><div class="img_notfirst_div">'+
					'<div class="img_each"  οnclick="selectImg(this)">'+
					'<img alt="" src="" class="img_pre">'+
						'</div>'
			);
	}else{
		$('.add_remove_img').append(
				'<div class="img_notfirst_div">'+
					'<div class="img_each"  οnclick="selectImg(this)">'+
					'<img alt="" src="" class="img_pre">'+
						'</div>'
			);
	}
});

添加float样式，在第一次加载图片位时添加一个<br>换行符，但是刚加上发现第一排第一个图片位总是靠右空出一段距离，原因：<br>的默认高度不够高（比添加图片按钮所占的高度要小），所以自定义了br标签，设置了新的高度，解决。

2、一开始添加的图片位点击事件不好使，后来经过上面在每个添加的布局中分别绑定onclick事件就可以了。

3、删除图片位：

/*删除图片位*/
$('.option_ctr_minus').on('click',function(){
	if($('.add_remove_img').children().length>0){
		$('.add_remove_img').children().last().remove();
	}
});

.children().last().remove()方法也是让我惊呆了，好强大。

4、上传图片不成功，明明获取到了图片路径，但是ui上面显示不出来，原因是：onclick事件如上图中所示，写在了外层div中，this传递的是外层的div对象

function selectImg(self){
	clickImg = $(self);
	console.log(clickImg.children());
	$('#file_ns').click();
};

为图片添加图片时应该这样：

clickImg.children().attr('src',data.model.url);

5、js的hide（）和show（）方法要和style（display：none）结合使用，如果不定义display，hide和show方法是不好用的。