使用Javascript更改所有具有類的元素的css類

基本上我試圖找到具有特定類名的所有元素並將其切換爲另一個類。我有另一個功能，將其切換回原始類名。這裏是我的功能與一個onclick觸發：使用Javascript更改所有具有類的元素的css類

function showEventsAppliedTo() { 
    var myObj = document.getElementsByClassName('notApplied'); 
    while (myObj.length >= 0) { 
     myObj[0].className = 'mblListItem notAppliedOut'; 
    } 
    AppliedToButton.set('style', 'display:none;'); 
    EventListingButton.set('style', 'display:block;'); 
}

我收到一個錯誤說MyObj中[0]是不確定的。任何想法爲什麼發生這種情況？

作爲說明，我們使用Dojo，因此是函數的最後一行。我知道我可以很容易地用jQuery做到這一點，但我們沒有使用它，加載另一個框架沒有意義。

在此先感謝您的幫助。

編輯

感謝來自阿布舍克米什拉的幫助下，我修改了我如何處理這個循環，並發現了一種與JUST道場，這是我更願意這樣做。下面的代碼：

function listingClassToggle() { 
    dojo.query(".notApplied").addClass("notAppliedOut"); 
    dojo.query(".notApplied").removeClass("notApplied"); 
}

很多簡單的代碼和很多比我以前的解決方案更輕。感謝你的幫助。我希望這可以幫助別人。

來源

2012-10-09 chazthetic

你也許可以使用dojo的'forEach'來遍歷myObj，那麼你就不需要檢查零。 http://dojotoolkit.org/reference-guide/1.7/dojo/forEach.html。另外''dojo.query'基於css的查詢，這將是'dojo.query（'。notApplied'）;' –

我想知道這會比我使用的方法運行得更快嗎？下面的答案解決了這個問題，但我也會研究這種方法。那個查詢方法可能比getelement更好 – chazthetic

我相信dojo的query會跨瀏覽器更加兼容。 'getElementsByClassName'很好，但在IE7和8中不起作用;）http://caniuse.com/#search=getElementsByClassName –

應該只是測試> 0而不是>= 0。當長度等於零時，不存在元素零。

來源

2012-10-09 16:37:16 Pointy

哦，是的，就是這樣。 '0'表示沒有元素了！ :-)我在想'while（myObj [0]）{...' –

這就解釋了爲什麼它看起來像函數正確地做了一切，並在最後拋出一個錯誤。這樣做，謝謝！ – chazthetic

查看我上面的編輯，瞭解如何使用Dojo功能執行此操作，而不是運行'while'語句 – chazthetic

使用Javascript更改所有具有類的元素的css類

回答

相關問題