Question

我也是编程和jQuery的新手。我正在尝试创建一个动态的照片查看器。图像的所有数据（包括图像的url）都在obj prop response中，该值是一个对象的数组，它有很多道具，但我只需要src和src_big，这个值就是网址。

这个想法就是当你点击图像的预览时，它会显示modalDiv，并在此<img>附加<img>（src_big网址为<div>道具值）。

所以，我已经可以使用数组中每个对象的src属性创建图像的动态预览（imgContainer），但我无法弄清楚如何捕获src_big道具单击元素以显示单击图像的完整大小。
这是代码：

var testArray = {response:
        [{src:"1_small.jpg",
             src_big:"1.jpg"
            },
            {
             src:"2_small.jpg",
             src_big:"2.jpg"
            },
            {
             src:"3_small.jpg",
             src_big:"3.jpg"
            },
            {
             src:"4_small.jpg",
             src_big:"4.jpg"
            }
        ]
    },
    i= 0,
    arrContainer = $(".array-container"),
    modalDiv = $(".mod-div"),
    body = $("body"),
    imgContainer = $(".img-container"),
    arr=[];


for(i; i<testArray.response.length;++i){ \\CREATE IMG CONTAINER

    arrContainer.append($("<div class='img-container'></div>").css({"background-image":'url("' + testArray.response[i].src + '")',
            "width":"200px","height":"200px"}));

       }

Answer 1

如果我理解正确你只想在点击小图片时显示大图像。您可以通过获取单击的div的索引来执行此操作。

arrContainer.on('click', '.img-container', function() {
  var indx = $(this).index();
  var src_big = testArray.response[indx].src_big; // this will be your big image url
});

访问点击元素jQuery的道具

1 个答案: