jQuery removeClass (), как это работает

Question

У меня есть изображения на моей странице.Пользователь может добавить больше изображений на страницу, нажав кнопку.Новые изображения добавляются асинхронно.Первоначально каждое изображение на странице использует специальный класс, который будет использоваться при загрузке изображения.После загрузки изображения этот класс удаляется.Каждое загружаемое изображение имеет класс imageLoading :

<img class="imageLoading" scr="someimage.png">

После загрузки этих изображений я удаляю этот класс (упрощенный код без подробностей):

 $('img.imageLoading')
         .each(function(){ $(this)
         .load(function(){ $(this)
         .removeClass('imageLoading');
                               });});

Визуально я вижу, что стиль удален.Но когда я снова запускаю запрос:

$('img.imageLoading')

, через отладку я вижу, что возвращаются все изображения, а не только загружаемые, т.е. это работает так, как будто я не удалил класс для изображений, которые уже былизагружен.Я заглянул в исходный код страницы и увидел, что на самом деле в HTML класс не был удален, хотя вызывался метод removeClass ().

Это поведение, в соответствии с которым все визуальные изменения применяются, кроме атрибута классане удаляется в коде HTML?Если так, то как это можно обойти в этом случае.Или, возможно, я что-то упустил.

UPD Исходный код

Я еще не решил проблему, поэтому опубликуйте некоторый код, чтобы показать, как это работает и гдепроблема есть.Мой код работает так (неважные детали удалены):

Загрузка изображений обрабатывается:

после загрузки страницы:

    <script type="text/javascript">
       $(function() { processLoadingImages(); })
   </script>

после асинхронного вызова:

function onRequestComplete(result) {
            var div = document.createElement('div');
            div.innerHTML = result;
            document.getElementById('images').appendChild(div);
            processLoadingImages();
        }

Обработка изображений с помощью processLoadingImages function:

function processLoadingImages() {
         $('img.loadingImage').each(function() {
        if (!imageLoaded($(this)[0])) {
            $(this).hide()
                .load(function() {
                    removeImageLoadingClasses(this);
                    $(this).fadeIn();
                });
        }
        else {
            removeImageLoadingClasses(this);
        }
    });
}
function removeImageLoadingClasses(jqueryObj) {
        jqueryObj.removeClass('loadingImage');
        jqueryObj.parents('div').removeClass('loadingImageContainer');      
    }
    function imageLoaded(img) {
        if (!img.complete)
            return false;
        if (typeof img.naturalWidth != 'undefined' && img.naturalWidth == 0)
            return false;
        return true;
    }

Как видите, для каждого изображения есть контейнер divс классом, который удаляется для загруженных изображений.Как я проверил, что запрос повторяет все изображения, даже те, для которых вызывается removeClass?Я отладил функцию imageLoaded (см. Выше), и она всегда вызывается для всех изображений.

Answer 1

Проверьте с помощью утилиты отладки, например firebug , и просмотрите результат. Изменения, которые вы вносите в DOM с использованием javascript, не будут отражены в источнике страницы.

Answer 2

попробуйте .removeClass('imageLoading'); вместо .removeClass('imageloading');

Answer 3

Когда вы просматриваете код в браузере, вы видите исходный код, отправленный сервером.Вы должны увидеть экземпляр DOM, чтобы убедиться, что класс существует.Это легко сделать в Firefox с помощью Firebug.

Если вы не перезагрузили страницу, новый запрос не должен совпадать с изображениями, которые были удалены из класса загрузки изображений.Проверьте также, что код, который запускает метод removeClass, работает должным образом.Firebug - отличный инструмент для проверки такого поведения.

Answer 4

Является ли это поведением, согласно которому все визуальные изменения применяются, но атрибут класса не удаляется в коде HTML?

ответ: ДА

с помощью Firebug в Firefox или инструментов веб-разработки в Google Chrome вы можете видеть изменения ... но не изменения исходного кода ...

Answer 5

Прошу прощения за много шума из ничего.Я просто неправильно передал объект jQuery в подпрограмму:

removeImageLoadingClasses(this)

вместо

removeImageLoadingClasses($(this))

Так что теперь все в порядке.