Доступ к реквизитам элемента click jQuery

Question

Я новичок в программировании и jQuery тоже. Я пытаюсь сделать динамическое средство просмотра фотографий. Все данные для изображений (включая url для изображений) находятся в obj prop response, значение которого представляет собой массив объекты, которые имеют множество реквизитов, но мне нужны только src и src_big, эти значения являются URL-адресами.

Идея заключается в том, когда вы нажимаете на предварительный просмотр изображения, она отображает modalDiv и добавляет <img> (<img> URL-адрес: src_big). <div>.

Итак, я уже могу создавать динамические предварительные просмотры изображений (imgContainer), используя свойство src каждого объекта в массиве, но я не могу понять, как поймать опорный элемент щелкнутого элемента, чтобы показать полный размер щелчка.
Вот код:

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