2011-05-18 85 views
2

我正在嘗試使用jquery爲圖片庫分頁。我使用的圖像目錄包含大約600張圖像,命名如下:「photo1.jpg」...「photo(n).jpg」...「photo600.jpg」。如何將參數發送到Jquery中的每個函數

假設我有一個變量持有頁碼var page,每個虛擬頁面上有40個圖像。我想要做的事情如下:

for (var i = 0; i<40; i++){ 
     var imageNum = (((page*40)-40)+i+1); 
     $("img")[i].attr("src","photo"+ imageNum + ".jpg"); // Doesn't work 
    } 
} 

這是hackish,但你看到我想做什麼? jquery API有some info on using each()迭代通過jquery對象,但我無法弄清楚如何發送每個函數的一個參數,其中包含關於哪個頁面的數據,我需要確定圖像的路徑。我要的東西,如:

$("img").each(function (i) { 
     //code to update image paths based on page parameter 
     }); 

我打開不同的方法爲好,我是一個總的小白,我覺得我可能要對這個錯誤的方式來開始:S。

編輯 感謝大家的回答。

如果你正在尋找一個快速和簡單的答案,使用each(),看看傑夫B的答案。

我接受了帕特里克dw的答案,因爲它更詳細地介紹了我正在製作的一個單獨的錯誤,並介紹了另一種方法。另外,如果您和我一樣,並且認爲您需要將參數傳遞給.each(),請參閱我們對他的回覆的評論。

回答

3

這不起作用,因爲[i]爲您提供了不裹在一個jQuery對象的本地DOM元素。

jQuery有eq()[docs]方法給你包裝的元素,所以你可以調用attr()[docs]方法。

// Do NOT run the selector inside the loop 
var imgs = $("img"); 

for (var i = 0; i<40; i++){ 
     var imageNum = (((page*40)-40)+i+1); 
     imgs.eq(i).attr("src","photo"+ imageNum + ".jpg"); // Doesn't work 
    } 
} 

作爲替代,可以直接傳遞一個函數到attr()[docs]方法將循環過你的元素。

$("img").attr('src', function(i) { 
    return "photo" + (((page*40)-40)+i+1) + ".jpg"; 
}); 

return值將被分配給你設置屬性(在這種情況下src)的值。

+0

1爲那些商標上標[docs]鏈接。你應該註冊這些。 – Raynos 2011-05-18 17:16:09

+0

帕特里克,我非常喜歡你提供的替代解決方案,非常乾淨! 不幸的是,對於任何發現這條線索的人來說,他們可能會和我一樣對範圍感到困惑。 我錯誤的印象是,我需要將'page'傳遞給每個函數 - 顯然你沒有。 'page'在你的替代解決方案和Jeff B給出的解決方案中都可用,它不需要被傳遞給被稱爲每個參數的函數。 與回調和函數被調用的順序有關嗎?我需要閱讀更多。我是新來jquery(和JavaScript)。 :) – 2011-05-18 17:20:02

0

第二種方法當然更加漂亮,但第一種方法也可以。

你應該使用這樣的:$($("img")[i]).attr(...)

1

.each()功能通行證你的指標,(如果你希望值):

$("img").each(function(idx) { 
    $(this).attr("src","photo"+ (((page*40)-40)+idx+1) + ".jpg"); 
}); 

實施例:(類似,但修改爲使用佔位符)

http://jsfiddle.net/mEzR9/

相關問題