jQuery的每個循環

我堅持瞭解每個循環的行爲。jQuery的每個循環

這裏是我的代碼：

$.each(thumbs, function() { // where thumbs is array of strings 
    project = this; 

    $('#gallery').append(
     '<li>' 
     + '<a href="/portfolio/' + project + '">' 
     + '<img src="/img/' + project + '_bw.jpg" id="' + project + '_bw" />' 
     + '<img src="/img/' + project + '_tn.jpg" id="' + project + '_tn" />' 
     + '</a>' 
     + '</li>' 
    ); 

    // alert(project); - alerts every element of array as expected 

    $('#' + project + '_bw').load(function() { 

     // alert(project); - alerts only the last element of array, 
     // but as many times as many elements in array 

     $('#' + project + '_bw').fadeIn(150,function(){ 
      $('#' + project + '_tn').css("opacity", 1); 
     }); 
    }); 
});

的問題是，當我試圖定義元素，在這裏我想執行.load功能的ID，它十分重視這一功能只的最後一個元素我正在循環的數組。

來源

2013-09-22 zee

你需要把你的負載在外部功能，並通過項目作爲參數，並調用在循環功能（見範圍） –

嗨3dgoo，確保萬無一失。它是字符串數組：「proja」，「projb」，「projc」 – zee

您的負載沒有時間來完成循環以完成所有迭代，以確保每個循環都觸發一個獨特的加載操作，如上所述 –

您的問題是project的範圍是在您的每個循環之外定義的。

因此，所有thumbs都被循環，並設置負載監聽器。但是，當第一個加載事件被調用並且調用了加載監聽器函數時，project變量被設置爲循環的最後一個值。

所以你需要做的是在每個循環內設置一個局部變量來爲每次迭代設置變量。

試試這個：

的Javascript

$.each(thumbs, function() { 
    var thisProject = this; 

    $('#gallery').append(
     '<li>' + '<a href="/portfolio/' + thisProject + '"><img src="/img/' + thisProject + '_bw.jpg" id="' + thisProject + '_bw" /><img src="/img/' + thisProject + '_tn.jpg" id="' + thisProject + '_tn" /></a></li>'); 

    $('#' + thisProject + '_bw').load(function() { 
     $('#' + thisProject + '_bw').fadeIn(150, function() { 
      $('#' + thisProject + '_tn').css("opacity", 1); 
     }); 
    }); 
});

這是問題的一個例子：

HTML

<div id="output"></div>

的Javascript

var count = 0; 
$.each([500,1000,1500,2000,2500], function() { 
    var thisValue = this; 
    var inScopeCount = count + 1; 
    setTimeout(function() { 
     $('#output').append('<strong>For ' + thisValue + ':</strong><br />count: ' + count + '<br /> inScopeCount: ' + inScopeCount + '<br />'); 
    }, this); 
    count += 1; 
});

Demo

來源

2013-09-22 22:13:42 3dgoo

Hi @ 3dgoo，感謝您的評論，我不確定這是否是晚上工作時間，但我看不出你的「嘗試這個」代碼和我的任何區別。請注意我的變量「project」是在「.each」函數中定義的，就像你的var「thisProject」一樣。我錯過了什麼嗎？ – zee

區別在於在每個內部用'var'聲明它。這將爲這個循環的實例創建變量。演示顯示了差異。看一次jsfiddle備份並運行。 – 3dgoo

jQuery的每個循環

回答

相關問題