<!-- 图片列表 -->
<div class="showTem">
<div id="selectFile">
<input accept="image/*" type="file" />
</div>
<div id="imgList" class="showImg">
</div>
</div>
// 图片列表
var imgList = $("#imgList");
// 自动添加图片
for (var i = 1; i <= 20; i++) {
var newImgItem = $('<div class="tudiv"><img src="./image/' + i + '.png" alt=""></div>');
imgList.append(newImgItem);
}
// jquery可以批量添加事件
var btns = $(".tudiv");
// 上次选中的项
var lastSelectItem = btns.first();
lastSelectItem.css('border', '6px solid #292C30');
// 点击切换事件
function onImgItemClicked(e) {
// 初始化尺寸值
draw.width = 60;
draw.height = 2;
draw.thickness = 0.1;
lastSelectItem.css('border', 'none');
console.log(this, e);
var $this = $(this);
$this.css('border', '6px solid #292C30');
image.src = $this.children("img").attr("src");
lastSelectItem = $this;
}
btns.click(onImgItemClicked);
// 选择相册
var selectFile = $("#selectFile");
selectFile.change(function (e) {
let file = e.target.files[0];
console.log("prepend", file);
if (!file) return;
src = window.URL.createObjectURL(file);
// 插入新的图片:在头部
var newImgItem = $('<div class="tudiv"><img src="' + src + '" alt=""></div>');
// 添加事件
newImgItem.click(onImgItemClicked);
imgList.prepend(newImgItem);
// 模拟一次点击操作:实现切换
newImgItem.click();
});