获取点击元素jQuery的props

Question

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

这个想法是当您单击图像预览时，它将显示modalDiv，并附加一个<img>（<img> URL 在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
});