javascript - <img>添加onclick（点击查看大图）的问题-PHP中文网问答

点击小图就是查看大图片

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是从接口得到的数据

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

.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;
            }

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

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; } };

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(); });

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jquery.min.js"></script> </head> <body> <ul id="test1"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <ul id="test2"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <script> function bind1(){ var li = $("#test1 li") for(var i = 0; i < li.length; i++){ $(li[i]).on("click", function(){ alert(i); }) } } function bind2(){ var li = $("#test2 li") for(var i = 0; i < li.length; i++){ (function(e,i){ e.on("click", function(){ alert(i); }) })($(li[i]),i); } } $(function(){ bind1(); bind2(); }) </script> </body> </html>

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(i){ return function() { if (flag) { $("#blackBackground").show(); document.getElementById("bigImg").src = imgSrc; $("#bigImg").show(); flag = false; } else{ $("#blackBackground").hide(); $("#bigImg").hide(); flag = true; console.log(i); } } })(i); obj.style.maxWidth = "31%"; obj.style.marginLeft = "2%"; $("#detail_content_img").append(obj); }

全部回复(5)

怪我咯2017-04-11 10:07:09 5楼

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

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

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

var imgSrc, i;

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

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

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

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

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

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

赞 +0

添加回复

黄舟2017-04-11 10:07:09 4楼

obj.onclick = function(){
    ...
};

改为-->

(function(obj,imgSrc){
 obj.onclick = function(){
   ...
   //src赋值imgSrc
 };
})(obj,imgSrc)

如下这就是区别,

PHP中文网2017-04-11 10:07:09 3楼

用class来处理这种相同元素的点击事件，因为ID是唯一的，只会处理最后那个ID。前面的会被覆盖。这个完全可以用JQ来做么

<img class="bigImg" >

$('.bigImg').click(function(){

});

大家讲道理2017-04-11 10:07:09 2楼

for循环里面当你的onclike没有触发的时候for本身还在执行，所以当你点击的时候此时的i已经是达到最大值了，所以你可以采用闭包的形式将每个i保存下来

PHP中文网2017-04-11 10:07:09 1楼

兄弟，你这一会用js语法,一会用jquery的语法，这样真的好吗？