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 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

当您在浏览器中查看代码时，您会看到服务器发送的原始代码。您应该看到DOM的一个实例来验证该类是否存在。您可以使用Firebug在Firefox中轻松完成。

除非您重新加载了页面，否则新查询不应与删除图像加载类的图像匹配。还要检查运行removeClass方法的代码是否按预期运行。 Firebug是测试此类行为的绝佳工具。

Answer 2

尝试.removeClass('imageLoading');代替.removeClass('imageloading');

Answer 3

检查使用 firebug 等调试实用程序并观察结果。使用javascript对DOM所做的更改不会反映在页面源中。

Answer 4

这种行为是设计所有的应用视觉变化但是 HTML中不删除class属性码？

回答：是

使用firefox中的firebug或google chrome中的web dev工具，您可以看到更改...但不是原始代码更改...

Answer 5

我很抱歉没什么。我只是错误地将jQuery对象传递给子例程：

removeImageLoadingClasses(this)

而不是

removeImageLoadingClasses($(this))

现在没关系。

jQuery removeClass（），它是如何工作的

5 个答案: