html5+img+onclick事件,<img>添加onclick（点击查看大图）的问题

第一个是总是最后一张的原因如下：

var不像let、const,没有块级作用域的概念，会变量提升。

并且还允许重复申明。

所以你的代码，实际执行的效果是这样var imgSrc, i;for(i=0;i 

imgSrc = in_pic[i];

// ...

}

然后可以改一下由event来获取srcobj.onclick = function(ev){                if (flag) {

$("#blackBackground").show();

document.getElementById("bigImg").src = ev.target.src;

$("#bigImg").show();

flag = false;

} else{

$("#blackBackground").hide();

$("#bigImg").hide();

flag = true;

}

};

其次就是再次点击的逻辑，那个flag有点问题，就是不知道你前面申明没，不然就成了全局变量，污染了全局，可能被污染了。

所以不要乱立flag...

大图不隐藏是因为你把大图那个show出来了，导致你的点击事件落在了大图上了，小图接收不到点击事件了。自然就不能触发你的onclick回调。

建议的改法是给#blackBackground这个元素加个点击事件，用来隐藏它自己和bigimg。

这段代码如果是我，我会这么写：

var imgsHtml = in_pic.map(function(v) {  return '';

}).join('');

$("#detail_content_img").append(imgsHtml);

$("#blackBackground").on('click', function(ev) {

$(this).hide();

});

$("#detail_content_img").on('click', 'img', function(ev) {

$("#blackBackground").show();

$("#bigImg").attr('src', ev.target.src).show();

});