使用Javascript更改所有具有特定类的元素的CSS类

Question

基本上，我正在尝试查找所有具有特定类名的元素并将其切换到另一个类名。我还有另一个函数，可以将其切换回原始类名。这是我的onclick触发的函数：

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;');
}

我收到一个错误，说我的Obj[0]未定义。你知道为什么会这样吗？

顺便提一下，我们正在使用Dojo，因此函数的最后一行就是如此。我知道我可以轻松地使用jQuery完成这个任务，但我们不使用它，加载另一个框架也没有意义。

感谢您的帮助。

编辑

感谢Abhishek Mishra的帮助，我修改了处理这个循环的方式，并找到了一种只使用Dojo的方法，这正是我所需要的。以下是代码：

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

比起我之前的解决方案，这段代码简单得多而且更加轻量级。感谢您的帮助。我希望这能对其他人有所帮助。

- chazthetic

---

你可以使用dojo的forEach循环遍历myObj，这样就不需要检查零值了。http://dojotoolkit.org/reference-guide/1.7/dojo/forEach.html。此外，还可以使用基于CSS的查询的`dojo.query`，例如：`dojo.query('.notApplied');` - Abhishek Mishra

我在想这个方法是否比我现在使用的方法运行得更快？下面的答案解决了问题，但我也要研究一下这种方法。那个查询方法可能比getelement更好。 - chazthetic

我相信dojo的query在各种浏览器上都更兼容。getElementsByClassName虽然不错，但在IE 7和8中无法使用;) http://caniuse.com/#search=getElementsByClassName - Abhishek Mishra

好的，知道了！在这种情况下，现在实施它比以后再去尝试更有意义！谢谢。 - chazthetic

我按照你的建议使用了以下代码：'dojo.query(".notApplied").addClass("notAppliedOut"); dojo.query(".notApplied").removeClass("notApplied");'，它非常有效！我只是在语句中切换了类来实现切换效果。感谢你的帮助！ - chazthetic

Answer 1

应该测试> 0而不是>= 0。当长度等于零时，没有第零个元素。

- Pointy

---

哦耶，就是这样。 0 表示没有元素了！:-) 我在想while (myObj [0]) {... - I Hate Lazy

这就解释了为什么函数似乎一切正常，但最后却抛出了一个错误。做到了，谢谢！ - chazthetic

看一下我上面的编辑，了解如何只使用Dojo功能而不运行“while”语句来完成它。 - chazthetic