2015-01-14 114 views
0

我是編程和jQuery的新手太。我試圖做一個動態照片查看器。圖像的所有數據(包括圖像的url)是在obj道具response,該值是數組一個對象,裏面有很多道具,但我只需要srcsrc_big,這個值是URLs。

這個想法是當你點擊一個圖像預覽時,它會顯示一個modalDiv,並附加一個<img><img> URL是在src_big prop值)到這個<div>


因此,我已經可以使用數組中的每個對象的src屬性創建圖像的動態預覽(imgContainer),但我無法弄清楚如何捕獲單擊元素的src_big支柱以顯示點擊圖像的完整大小。
下面是代碼: 訪問道具的點擊元素jQuery

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

     } 

回答

0

如果我理解正確的,你只是想顯示大圖,當您點擊小圖片上。您可以通過獲取點擊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 
}); 
+0

當我點擊一個元素時,它顯示數組中的下一個圖像,而不是當前。 – Max

+0

你可以做'var indx = $(this).index() - 1;',在父項中是否有更多的圖像比你添加的圖像? – Spokey

+0

對不起,我太蠢了!這工作正常!謝謝! – Max