2014-02-18 71 views
0

請參閱更新內部的底部jQuery的數組元素返回undefined點擊功能

我99%肯定,我的問題是範圍,但我不知道爲什麼它造成的問題。我對JS/jQuery範圍的理解顯然不是它應該在的地方。

的jsfiddle:http://jsfiddle.net/a3N2L/

請原諒分號,這是習慣從PHP結轉的力量。

我有一個動態創建的圖像列表,作爲一個學習練習,我試圖創建一個自定義的燈箱,允許您滾動瀏覽它們。 (顯示縮略圖已經將薄膜條作品)

的鏈接/ HREF的每個推入與該代碼的陣列(其似乎很好地工作):

var imgArray = []; 

$('.filmstrip a').each(function() { 
    imgArray.push($(this).prop("href")); 
}) 

然後是代碼來創建收藏夾,這也很好。

在燈箱內部,我試圖使用for循環來根據當前圖像在數組中的位置將正確的href應用到每個左/右導航按鈕。這一切似乎以我期望的方式工作,直到我嘗試在鏈接上使用點擊功能淡入/淡出新圖像。

如果我只是設置$('.next a').prop('href', imgArray[i+1])它應用正確的鏈接地址,但顯然只是獨立加載圖像。

說的跳動了我的整個塊是:

if (imgArray.length > 1) {    
     for (var i = 0; i < imgArray.length; ++i) { 

      if (i == 0) { 

       $('.prev').hide(); 
       $('.next').show(); 

    // IF I REFERENCE imgArray[i] HERE, IT WORKS 

       $('.next a').click(function(e) { 
        e.preventDefault(); 

    // INSIDE THE CLICK FUNCTION, imgArray[i] RETURNS UNDEFINED 

        $('#lightbox img').fadeOut('fast'); 
        $('#lightbox img').prop('src', imgArray[i+1]); 
        $('#lightbox img').fadeIn('fast'); 
       });     

      }    
     } 
    } 

是有其他一些如果公司和其他跟隨,但我不認爲我需要包括額外的50行

建議非常高興地接受!

UPDATE

每克里斯·哈迪的建議,我感動外循環的點擊功能,並使用內循環: 每種條件var pos = imgArray[i]; break;,然後結束後使用

$('.right a').click(function(e) { 
e.preventDefault(); 

    $('#lightbox img').fadeOut('fast'); 
    $('#lightbox img').prop('src', pos); 
    $('#lightbox img').fadeIn('fast'); 
});  

循環,它似乎工作,雖然我現在有什麼在哪個陣列的位置和相關的條件有什麼奇怪的問題,但我想我可以把那部分出來...

除非有人有更好的方法?我還更新了的jsfiddle:http://jsfiddle.net/a3N2L/3/

另一個更新

顯然我的條件都錯了內循環,因爲我需要我比較當前的IMG URL(存儲在另一個變量)而不是一個數字...杜

解決

感謝您的幫助:)

最後的jsfiddle爲未來的讀者誰可能希望例如:http://jsfiddle.net/a3N2L/4/

+0

你可以做一個jsfiddle嗎? – Kolby

+2

你不應該在你的循環中綁定你的點擊處理程序,你最終會綁定多個處理程序,這可能不是你想要的。 –

+0

是的,一會兒我上傳幾張圖片並拉出相關的代碼......對不起,之前從未問過JS的問題。 – LouisK

回答

1

我不能解釋這個事情很好,但是,我會盡力用純英文做。

在您的for循環中一切正常,我們知道什麼是imgArray,我們知道什麼是i,然後我們創建一個函數,稍後在click事件中觸發。發生這種情況時,我們不知道i,也可能不是imgArray,因此您將收到錯誤消息。

請參閱this question對於類似的問題,比我更好的解釋是什麼問題。

+0

謝謝埃米爾,在循環裏面有點擊功能肯定是我的主要問題。 現在我只是有問題的數組,但我認爲我可以認爲這部分:) – LouisK

+0

沒問題,對不好的解釋抱歉,英語不是我的本地人,我從來沒有真正學過範圍和其他定義。我自己瞭解它是如何工作的,但有時很難解釋。 –

+0

我認爲JS中的所有變量都是全局變量,但我猜不是!再次謝謝你。 – LouisK