javascript - <img>添加onclick（点击查看大图）的问题

问题描述

问 题

点击小图就是查看大图片

for (var i = 0; i < in_pic.length; i++) {
            var obj = document.createElement("img");
            obj.src = in_pic[i];
            var imgSrc = in_pic[i];
            //alert(imgSrc);
            obj.onclick = function(){
                if (flag) {
                    $("#blackBackground").show();
                    document.getElementById("bigImg").src = imgSrc;
                    $("#bigImg").show();
                    flag = false;
                } else{
                    $("#blackBackground").hide();
                    $("#bigImg").hide();
                    flag = true;
                }
            };
            obj.style.maxWidth = "31%";
            obj.style.marginLeft = "2%";
            $("#detail_content_img").append(obj);
        }

in_pic是从接口得到的数据

<div class="blackBackground" id="blackBackground">
            <img src="img/58451d348973a.png" class="bigImg" id="bigImg"/>
        </div>

.blackBackground {
                display: none;
                position: fixed;top: 0;left:0;width: 100%;height: 100%;background-color: black;z-index: 10;
                text-align: center;
            }
            .bigImg {display: none;
                vertical-align:middle;width: 100%;z-index: 100;
            }

每次点击小图出现的是最后一张，而且再次点击的话，大图也不会隐藏，代码哪里写错了？

解决方案

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

var不像let、const,没有块级作用域的概念，会变量提升。
并且还允许重复申明。

所以你的代码，实际执行的效果是这样

var imgSrc, i;

for(i=0;i < in_pic.length;i++){
  imgSrc = in_pic[i];
  // ...
}

然后可以改一下由event来获取src

obj.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 '<img src="' + v + '">';
}).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();
});

这篇关于javascript - <img>添加onclick（点击查看大图）的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！