каждый цикл jQuery

Question

каждый цикл jQuery

0

Я застрял в понимании поведения моего цикла.

Вот мой код:

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

zee 23 сен. 2013, в 00:26

Источник

Теги:

jquery

each

load

1 ответ

Ещё вопросы

3dgoo · Accepted Answer · 2013-09-22T20-34-00.000Z

Ваша проблема заключается в том, что объем 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;
});

демонстрация

Привет @ 3dgoo, спасибо за ваши комментарии, я не уверен, является ли это результатом позднего рабочего дня, но я не вижу никакой разницы между вашим кодом "попробуй это" и моим. Обратите внимание, что моя переменная "проект" определена в функции ".each", так же, как ваша переменная "thisProject". Я что-то пропустил?
Разница заключается в объявлении его с помощью var для каждого. Это создаст переменную для этого экземпляра цикла. Демо показывает разницу. Посмотрите, как только jsfiddle снова заработает.