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

我在我的頁面上有圖像。用戶可以通過單擊按鈕在頁面上添加更多圖像。新圖像異步添加。最初，頁面上的每個圖像都使用一個特殊的類來在圖像加載時使用。圖像加載後，該類將被刪除。被加載每個圖像具有類imageLoading：jQuery removeClass（），它是如何工作的

<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函數（見上面），它總是要求所有的圖像。

來源

2010-06-16 Centro

你是什麼意思'再次運行查詢'？ – Reigel 2010-06-16 08:35:43

它在異步調用之後運行，當用戶單擊按鈕時，新圖像將添加到內容HTML的末尾並由查詢檢索以進行處理。 – Centro 2010-06-16 08:43:09

當您在瀏覽器中查看代碼時，您會看到服務器發送的原始代碼。您應該看到DOM的一個實例來驗證該類是否存在。您可以使用Firebug輕鬆地在Firefox中執行此操作。

除非您重新加載頁面，否則新查詢不應與圖像加載類被刪除的圖像相匹配。還要檢查運行removeClass方法的代碼是否按預期運行。 Firebug是測試此類行爲的好工具。

來源

2010-06-16 08:36:15 kgiannakakis

沒錯，你會看到沒有操縱的原始代碼。一些瀏覽器甚至再次執行http請求來獲取源代碼。正如所建議的那樣，使用帶有Firebug擴展的Firefox來查看運行時DOM發生了什麼。 http://getfirebug.com/ – 2010-06-16 08:42:39

好的，即使我沒有看到變化，可能我從來沒有見過，但問題是，在刪除類後，所有圖像都會返回。 – Centro 2010-06-16 08:48:15

使用Firebug調試腳本以自行解決問題或在此處發佈完整源代碼以獲得一些幫助。 – kgiannakakis 2010-06-16 08:50:05

是由設計行爲應用於所有視覺上的變化，但類屬性不是HTML代碼去掉？

答案：是

與Firefox中的Firebug或Web開發工具在谷歌瀏覽器，你可以看到的變化......但不是原來的代碼改變...

來源

2010-06-16 08:37:05 Reigel

試.removeClass('imageLoading');代替.removeClass('imageloading');

來源

2010-06-16 08:37:18

什麼??????????? WTF +1，但這不是問題...;） – Reigel 2010-06-16 08:39:15

css區分大小寫 – 2010-06-16 08:45:59

這不重要，它只是一個錯誤類型。我會編輯它。 – Centro 2010-06-16 08:50:52

檢查使用調試工具像firebug和觀察結果。您使用javascript對DOM所做的更改不會反映在頁面源代碼中。

來源

2010-06-16 08:37:23 rahul

對於什麼都不說，我很抱歉。我剛剛錯誤地傳遞jQuery對象進入子程序：中

removeImageLoadingClasses(this)

代替

removeImageLoadingClasses($(this))

所以現在沒事。

來源

2010-06-16 12:51:18 Centro

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

回答

相關問題