Каждая петля jQuery

Question

Я придерживаюсь понимания поведения каждого цикла.

Вот мой код:

$.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 он придает эту функцию только к последнему элементу массив, который я просматриваю.

Answer 1

Ваша проблема в области 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