Я застрял в понимании поведения моего цикла.
Вот мой код:
$.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-функцию, он присоединяет эту функцию только к последнему элементу массива, который я просматриваю.
Ваша проблема заключается в том, что объем 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;
});
var
для каждого. Это создаст переменную для этого экземпляра цикла. Демо показывает разницу. Посмотрите, как только jsfiddle снова заработает.