請參閱更新內部的底部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/
你可以做一個jsfiddle嗎? – Kolby
你不應該在你的循環中綁定你的點擊處理程序,你最終會綁定多個處理程序,這可能不是你想要的。 –
是的,一會兒我上傳幾張圖片並拉出相關的代碼......對不起,之前從未問過JS的問題。 – LouisK